首页 > 代码库 > 学习HTML5之塔克大战（详细记录）
学习HTML5之塔克大战（详细记录）
学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src="http://www.mamicode.com/"
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
1 <html> 2 <head> 3 4 </head> 5 <body> 6 <!--用canvas画布画一个矩形--> 7 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 8 <script type="text/javascript"> 9 <!--得到画布-->10 var canvas_1=document.getElementById("gxjun");11 var cnt=canvas_1.getContext("2d");12 //alert(cxt);13 //moveto设置点位置14 cnt.moveTo(20,20);15 //有上面那个点为起点 设置第二个点位置16 cnt.lineTo(20,90);17 //将两个点连接起来18 cnt.stroke();19 //画出一个填充的三角形.-->路径20 //开始新路径21 cnt.beginPath();22 cnt.moveTo(40,20);23 cnt.lineTo(40,90);24 cnt.lineTo(80,90);25 //闭合路径，把最后这个点和第一点MoveTO()闭合26 cnt.closePath();27 //cnt.stroke();28 //填充矩形 由于三角形闭合了，所以填充了三角形29 //注意的一点是： 只有矩形才会不用路径闭合30 cnt.fill(); 31 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);32 //填充矩形 33 cnt.fillStyle="#004DFF"; //填充颜色34 cnt.fillRect(140,20,30,50); 35 //画其他图形时一定的记得开始和闭合36 cnt.beginPath();37 //如何话圆形 arc函数38 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时39 cnt.fillStyle="#FF0000";40 cnt.arc(220,40,20,0,360,false); cnt.closePath();41 cnt.stroke();42 cnt.fill();43 //画图像44 var img_1=new Image();45 img_1.src="10.jpg";46 //加载完毕后再绘图....47 img_1.onload=function(){48 //(object,x,y,weidth,height)49 cnt.drawImage(img_1,20,100,155,220); 50 } 51 </script>52 </body>53 </html>
效果图：
有关Javascript写字体：
代码：
1 <html> 2 <head》</head> 3 <body> 4 <!--用canvas画布画一个矩形--> 5 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 6 <script type="text/javascript"> 7 <!--得到画布--> 8 var canvas_1=document.getElementById("gxjun"); 9 var cnt=canvas_1.getContext("2d");10 //alert(cxt);11 //moveto设置点位置12 cnt.moveTo(20,20);13 //有上面那个点为起点 设置第二个点位置14 cnt.lineTo(20,90);15 //将两个点连接起来16 cnt.stroke();17 //画出一个填充的三角形.-->路径18 //开始新路径19 cnt.beginPath();20 cnt.moveTo(40,20);21 cnt.lineTo(40,90);22 cnt.lineTo(80,90);23 //闭合路径，把最后这个点和第一点MoveTO()闭合24 cnt.closePath();25 //cnt.stroke();26 //填充矩形 由于三角形闭合了，所以填充了三角形27 //注意的一点是： 只有矩形才会不用路径闭合28 cnt.fill(); 29 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);30 //填充矩形 31 cnt.fillStyle="#004DFF"; //填充颜色32 cnt.fillRect(140,20,30,50); 33 //画其他图形时一定的记得开始和闭合34 cnt.beginPath();35 //如何话圆形 arc函数36 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时37 cnt.fillStyle="#FF0000";38 cnt.arc(220,40,20,0,360,false); cnt.closePath();39 cnt.stroke();40 cnt.fill();41 //画图像42 var img_1=new Image();43 img_1.src=http://www.mamicode.com/"10.jpg";44 //加载完毕后再绘图....45 img_1.onload=function(){46 //(object,x,y,weidth,height)47 cnt.drawImage(img_1,20,100,155,220);48 //在画布上写字49 //设置字体的大小50 var text="火影忍着之战国时代"51 cnt.fillStyle="#0000FF";52 cnt.font="30px 华文彩云";53 cnt.fillText(text,200,200);54 } 55 </script>56 </body>57 </html>>
效果图：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。