画布Canvas的使用方法

最新推荐文章于 2023-07-10 14:17:42 发布

weixin_30463341

最新推荐文章于 2023-07-10 14:17:42 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yhyanjin/p/7100885.html

版权

　　今天来个画布的讲解，对于画布你们了解多少呢。

　　Canvas他是使用 JavaScript 来绘制图像的，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

　　在画布的流程中大致是这样：

　　1、’先获取画布canvas；

　　2、创建2d画布；

　　3、开始　　 X.beginPath();　

　　4、开始坐标 X.moveTo(X,Y);

　　5、结束坐标　　X.lineTo(X,Y)

　　4、过渡　　　　X.stroke();

　　5、结束　　　　X.closePath();

首先来个简单的表格的制作：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <canvas id="ca" width="300px" height="300px" style="width:300px;height:300px;border: 1px solid black"></canvas><!--canvas【画布】==========宽高必须在style外设*/-->
 9 <script>//=====相当于笔
10 //    1、获取
11     var ca=document.querySelector("#ca");
12     w=ca.width;//画布的宽
13     h=ca.height;//画布的高
14 var X=ca.getContext("2d");
15 for(var i=0;i<7;i++){
16     X.beginPath();
17     X.moveTo(h/6*i,0);
18     X.lineTo(h/6*i,w);
19     X.stroke();
20     X.strokeStyle='red';
21     X.closePath();
22 
23     X.beginPath();
24     X.moveTo(0,h/6*i);
25     X.lineTo(w,h/6*i);
26     X.stroke();
27     X.strokeStyle="yellow";
28     X.closePath();
29 }
30 X.beginPath();
31 X.fillStyle="red";
32 x.strokeStyle='red';
33 X.moveTo(10,10);
34 X.lineTo(100,100);
35 X.lineTo(10,100);
36 X.lineTo(10,10);
37 X.fill();
38 X.stroke();
39 X.closePath();
40 
41 
42 
43 
44 
45 </script>
46 </body>
47 </html>

再看看我画的太极吧：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas width="300px" height="300px" style="border: 1px solid"></canvas>
<script>
    var ca=document.querySelector("canvas");
    var x=ca.getContext("2d");
    x.beginPath();
//    两个大圆相交
    x.fillStyle="white";
    x.arc(150,150,150,0,180*Math.PI/180,false);
    x.fill();
    x.stroke();
    x.closePath();

    x.beginPath();
    x.fillStyle="black";
    x.arc(150,150,150,0,180*Math.PI/180,true);
    x.fill();
    x.stroke();
    x.closePath();
    //两个小圆
    x.beginPath();
    x.restore(90*Math.PI/180);
    x.fillStyle="black";
    x.arc(76,150,75,0,180*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();
    x.beginPath();
    x.restore(90*Math.PI/180);
    x.fillStyle="white";
    x.arc(76,150,20,0,360*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();

    x.beginPath();
    x.fillStyle="white";
    x.arc(227,150,75,0,180*Math.PI/180,true);
    x.fill();
    x.stroke();
    x.closePath();
    x.beginPath();
    x.fillStyle="black";
    x.arc(227,150,20,0,360*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();
</script>
</body>
</html>