Skip to main content
 首页 » 编程设计

canvas初学,教你学会在canvas画布上画线

2022年07月16日25jirigala
canvas 在html5要实现非常炫酷的效果 可以使用2d绘图功能,所有引入canvas(画布) 多用于游戏开发,并且低版本ie不支持
    注意:
    1.canvas默认大小为with:300 height:150
    2.如果浏览器不支持canvas,该浏览器会显示canvas标签的内容,但是不会运行canvas所绘制的效果
    3.canvas是行元素 
    4.canvas设置宽高的时候只能通过标签的属性进行设置,不能通过css样式中的height和width进行设置,也不能通过js设置,也就是canvas.style.height/width,通过标签以为的方式设置宽高会把canvas绘制的图像拉伸
    5.可以直接给canvas属性设置大小

HTML部分:

<canvas id="canvas" width="400" height="400">你的浏览器太low了 不支持canvas 赶快换一个吧</canvas>

JS部分:

① 获取canvas

var canvas = document.getElementById('canvas');
② 在canvas画布上里创建一支画笔
var ctx = canvas.getContext("2d");

③ 开始一个新路径(在画布上重新起个头)

ctx.beginPath();
④ 起始位置
ctx.moveTo(0, 0);

⑤ 设置线的宽度

ctx.lineWidth = 2;

⑥ 设置画笔描边儿颜色

ctx.strokeStyle = "red";

⑦ 开始画线,lineTo 划线(横坐标,纵坐标)先画一个正方形

ctx.lineTo(400, 0); 
ctx.lineTo(400, 400); 
ctx.lineTo(0, 400); 
ctx.lineTo(0, 0);

⑧ 执行绘制

ctx.stroke();

效果如下:

⑨ 关闭当前路径(如果不关闭,之后的代码会覆盖之前的代码,比如画笔的颜色,画笔的宽度等);

ctx.closePath();

⑩ 保存当前绘画

ctx.save();

结束end

我们在这个里面再画一个正方形

ctx.beginPath(); 
ctx.moveTo(100, 100); 
ctx.lineWidth = 2; 
ctx.strokeStyle = "green"; 
ctx.lineTo(100, 300); 
ctx.lineTo(300, 300); 
ctx.lineTo(300, 100); 
ctx.lineTo(100, 100); 
ctx.stroke();
如果你画的是一个封闭图形我们可以进行填充

设置填充颜色:

ctx.fillStyle = "yellow";

填充:

ctx.fill();

效果如下:

最后一步:

清除画布,我们可以清除整个画布也可以清除画布的部分

清除画布的部分:

可清除部分画布clearRect(x, y, 结束为止的x, 结束为止的y);

x:要清除部分左上角X坐标
y:要清除部分左上角Y坐标
ctx.clearRect(0, 0, 400, 200);

效果如下:我这里清除画布的上半部分

也可清除整个画布clearRect(0, 0, 画布的宽, 画布的高);

ctx.clearRect(0, 0, 400, 400);

这里是清除了整个画布

 Happy end!

设置线的宽度

本文参考链接:https://www.cnblogs.com/wulicute-TS/p/11881609.html