HTML5动画----canvas基础1（绘制基本图形）

最新推荐文章于 2022-06-13 15:34:13 发布

wenmin1987

最新推荐文章于 2022-06-13 15:34:13 发布

阅读量345

点赞数

本文链接：https://blog.csdn.net/wenmin1987/article/details/94297254

版权

Canvas API前景应用极为广阔，它能在网页中国创建一块矩形区域，这块区域称为画布，可以在其中绘制各种图形！

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <canvas id="myCanvas" style="border:1px solid ;" width="200" height="200">
           您的浏览器不支持Canvas元素，请更新或更换您的浏览器。
       </canvas>
       <canvas id="myCanvas2" style="border:1px solid ;" width="200" height="150">
           您的浏览器不支持Canvas元素，请更新或更换您的浏览器。
       </canvas>
       <canvas id="myCanvas3" style="border:1px solid ;" width="200" height="150">
           您的浏览器不支持Canvas元素，请更新或更换您的浏览器。
       </canvas>
   <script type="text/javascript">
       var c=document.getElementById("myCanvas");
       var c2=document.getElementById("myCanvas2");
       var c3=document.getElementById("myCanvas3");
       var context=c.getContext("2d");
       var context2=c2.getContext("2d");
       var context3=c3.getContext("2d");
   //   context.fillStyle="aquamarine";//填充色
   //   context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形
   //   context.fillText("你好",60,60,100);//填充出来的文字

//   if(c.getContext){//检测浏览器的支持
//       alert("您的浏览器支持Canvas！");
//   }else{
//       alert("您的浏览器不支持Canvas！");
//   }

   //1.绘制直线moveTo() lineTo() strokeStyle stroke()
   context.moveTo(0,0);
   context.lineTo(150,150);
   context.strokeStyle="red";
   context.strokeStyle="#000000";
   context.strokeStyle="rgb(255,0,0,1)";
   context.stroke();


   //2.绘制矩形 fillStyle fillRect() 或strokeStyle strokeRect()
   context.fillStyle="aquamarine";//填充色
   context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形

   context.strokeStyle="#ffffff";//轮廓的颜色
   context.strokeRect(60,60,100,80);//绘制的轮廓矩形

   //3.绘制弧线（圆形）fillStyle beginPath() arc() closePath() fill()
   context.fillStyle="#FF00FF";
   context.beginPath();//开始绘制路径
   context.arc(100,100,50,0,Math.PI*2,true);//x,y,r,startAngle（弧度0）,endAngle(弧度2π)，anticlockwise(true为按逆时针方向绘制)
   context.closePath();//结束绘制路径
   context.fill();//填充

   for(var i=0;i<15;i++){
       context2.strokeStyle="#FF00FF";
       context2.beginPath();
       context2.arc(0,150,i*10,0,Math.PI*3/2,true);
//       context2.closePath();//这只需要弧线，不需要闭合的连线，因此不需要句
       context2.stroke();
   }

   //4.，绘制路径的方式可以自由绘制其他形状，如绘制三角形
   context3.fillStyle="red";
   context3.strokeStyle="black";
   context3.beginPath();
   context3.moveTo(50,50);
   context3.lineTo(100,50);
   context3.lineTo(50,100);
   context3.closePath();
   context3.fill();
   context3.stroke();

   </script>
   </body>
</html>

清空画布：context.clearRect(x,y,width,height);

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript">
           function clearMap(){
               context.clearRect(0,0,300,200);//注意，清空的是画布里的内容，并不是画布本身
           }
       </script>
   </head>
   <body>
       <canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas>
       <script type="text/javascript">
           var c=document.getElementById("myCanvas");
           var context = c.getContext('2d');
           context.strokeStyle="#FF00FF";
           context.beginPath();
           context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
           context.stroke();
       </script>
       <br/>
       <input type="button" name="" value="清空画布" οnclick="clearMap()" />
   </body>
</html>

wenmin1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5动画----canvas基础1（绘制基本图形）

CanvasAPI前景应用极为广阔，它能在网页中国创建一块矩形区域，这块区域称为画布，可以在其中绘制各种图形！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head...
复制链接

扫一扫