Canavs初学

Posted 2020-10-19 Amy-WebFrontEnd

<canvas id="canvas" style="border:1px solid #f00;"></canvas>

公用js:

var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;//此处也可直接在标签中添加width height属性
var context = canvas.getContext("2d");

绘制直线：

context.moveTo(100,100);//状态
context.lineTo(200,200);//状态  直线
context.lineWidth = 6;
context.strokeStyle = "#00f";
context.stroke();//绘制边框

效果如图：

绘制三角形（空心）：

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态  直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;//边框宽度
context.strokeStyle = "#00f";//边框颜色
context.stroke();//绘制边框

效果如图：

从效果图中可以看出最后的点并没有完全闭合，此处可使用lineCap属性，在上面代码中加上

context.lineCap="round";//butt,round,square

效果如下：

只有最后一点是圆形，而另外两个角处是非圆形（？？？？？？？）

绘制三角形（实心）：

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态  直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框（边框不能完全闭合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色

效果如图：

在三角形（实心）基础上绘制另一条直线：

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态  直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框（边框不能完全闭合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//绘制另一条直线
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 2;//此处宽度比上面宽度小，因此三角形边框最内侧会被新边框覆盖
context.stroke();

效果如图：注意三角形边框（设置宽度不同）

若将第二个的lineWidth 也设置为6，效果如下图：

//绘制另一条直线
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 6;//此处宽度：2时比上面宽度小，因此三角形边框最内侧会被新边框覆盖
context.stroke();

context.fillStyle="#00f";
context.fill();

三角形边框宽度明显不为6(???????)

绘制不同路径使用beginPath及closePath：

context.beginPath();//开启
context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态  直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形
context.closePath();//关闭

context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框（边框不能完全闭合？？？？？？）

context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//绘制另一条直线
context.beginPath();//开启
context.moveTo(200,100);
context.lineTo(300,200);
context.closePath();//关闭

context.strokeStyle="#0f0";
context.lineWidth = 6;//此处宽度：2时比上面宽度小，因此三角形边框最内侧会被新边框覆盖
context.stroke();

context.fillStyle="#00f";
context.fill();