html-Canvas-1.1

创建画布

要想让咱们的东西展示出来，那肯定要有个画布哦，就是咱们作画的地方哦。那我们就要创建canvas画布。

<canvas id="myCanvas" width="200" height="250" style="border:1px solid #c3c3c3;"></canvas>

这里有东西需要咱们注意一下哦，width height，咱们可以直接写在canvas里，因为他有这个属性哦，是不是极好啊，哈哈。

同时还有个问题，如果我们要让canvas自适应，并且内部定位不是固定值。如果将宽度和高度写到样式里面，我们就会定位错误。所以我们很有必要使用js创建宽度和高度属性到canvas里面。

 

准备作画

刚才我们创建了画布，那我们在哪作画？是在canvas中间么？不是的！！是在js中间，用代码创建啊。

var c = document.getElementById("myCanvas"); //找到我们的画布
var cxt = c.getContext("2d");  //创建context 对象，目前仅支持2d，返回一个用于在画布上绘图的环境

接下来我们只要在cxt中画画就可以在canvas上看到了，是不是很厉害啊。

 

基础知识

---

1、移动点                             2、创建路径

3、颜色                                4、设置剪裁区

5、将源图像绘制到目标图像上

---

1、移动点

cxt.moveTo(10, 10);  //移动到（10，10）坐标位置

2、创建路径

cxt.beginPath();  //丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
cxt.closePath();  //用直线连接首尾

cxt.stroke();     //绘制轮廓形状

3、颜色

cxt.fillStyle = "black"; //设置填充颜色，默认为黑色
cxt.fill();              //填充
cxt.strokeStyle = "red"; //设置外框颜色
cxt.globalAlpha = 0.5;   //设置透明度 0.0(不透明)~1.0(透明)

4、设置剪裁区