canvas基础讲解，绘制直线，弧形，矩形，图片

canvas基础讲解，绘制直线，弧形，矩形，图片

1. 什么是canvas？
1.1 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画，控制其每一个像素。
1.2 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
2. Canvas 标签
2.1 canvas 标签语法和属性 （重点）
标签名 canvas，需要进行闭合。就是一普通的 html 标签。
可以设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略。
width 和 hegiht：默认 300*150 像素
注意：
不要用 CSS 控制它的宽和高,会走出图片拉伸，
重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
可以给 canvas 画布设置背景色
3. canvas坐标系
canvas 坐标系，从最左上角 0,0 开始。x 向右增大， y 向下增大

设置绘制起点

ctx.moveTo(x,y)//x:起点x坐标，Y:起点y坐标
//x,y 都是相对于 canvas盒子的最左上角

绘制直线

ctx.lineTo(x, y);

开始绘制路径

ctx.beginPath();
//核心的作用是将 不同绘制的形状进行隔离，
//每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

闭合路径

ctx.closePath();
//闭合路径会自动把最后的线头和开始的线头连在一起。

描边：

ctx.strokeStyle = 'black';  //描边颜色，画笔颜色
ctx.stroke();
ctx.strokeRect(x,y,heigth,width);//绘制矩形

填充

ctx.fillStyle = 'red';  //填充颜色
ctx.fill();  //填充
ctx.fillRect(x,y,heigth,width);//填充矩形

其他

lineWidth()//线条宽度
lineCap()//线条端点样式
ctx.lineCap = 'round'//圆角

4. canvas绘制的基本步骤
canvas 绘制的基本步骤：

• 第一步：获得上下文 =>canvasElem.getContext(‘2d’);
• 第二步：开始路径规划 =>ctx.beginPath()
• 第三步：移动起始点 =>ctx.moveTo(x, y)
• 第四步：绘制线(矩形、圆形、图片…) =>ctx.lineTo(x, y)
• 第五步：闭合路径 =>ctx.closePath();
• 第六步：绘制描边 =>ctx.stroke();

//html 部分：
<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器