Canvas—直线、矩形和圆

文章目录

直线

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

moveTo是移动,可以理解为移动画笔。lineTo则是从当前位置往指定位置画一条直线。以上代码的效果如下:

在这里插入图片描述

看起来没啥问题,可是实际上,第一条直线被画了两次

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

若两线是分别画的,则应是一条红色,一条蓝色,若是后面的stroke方法将两条线都画了一遍,则两条都是蓝色。

在这里插入图片描述

原因是因为moveTolineTo这些操作都是对内存的操作而并没有绘制到屏幕上,调用stroke方法的时候才真正的被绘制,因此内存中保存着两条线的路径,因此在第二个stroke方法被调用时,第一条直线也被绘制了。

那怎么解决这个问题呢?

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
cts.stroke();

ctx.beginPath();    //引入beginPath方法
ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

仅需在第一个stroke方法之后调用beginPath方法即可。这个方法会清空之前保存在内存中的路径。
在这里插入图片描述

矩形

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

[外链图片转存失败(img-ljWWK3pD-1562075809430)(http://note.youdao.com/yws/res/15763/486CA587848349F0A4638764447B91E3)]

尽管可以通过画线的方式画矩形,但调用strokeRect方法将会更为方便。

该方法接受4个参数,前两个是所要画的矩形左上角的坐标,后两个则分别是矩形的宽和高。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.arc(300, 300, 100, 0, 2*Math.PI);
ctx.stroke();

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/hjc256/article/details/94485198

相关文章