canvas 设置画笔颜色

2025-10-19 11:55:00

1、第一步，打开sublimeText编辑器，如下图

canvas 设置画笔颜色

2、第二步，编写一个静态canvas元素页面

宽300px，高300px;背景为蓝色。

#canvas{margin:10px 50px;width: 300px;height: 300px;background: blue;}

，详细代码以及效果如下图

canvas 设置画笔颜色

3、第三步，使用js获取到id为canvas的容器，然后把它定义为一块画布

//获取canvas容器

var canvas = document.getElementById('canvas');

//创建一个画布

var huabu = canvas.getContext('2d');

，详细代码如下图

canvas 设置画笔颜色

4、第四步，开始绘画一条线，这条线默认是黑色的，代码以及效果如下图。

canvas 设置画笔颜色

5、第五步，通过js设置画笔的颜色，详细代码以及效果如下图

canvas 设置画笔颜色

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。