canvas 常用操作

Web canvas

发布时间 : 2020-08-25 22:11

阅读 :

获取canvas绘制对象

var mycanvas = document.getElementById('canvas');
var cxt = mycanvas.getContext('2d');

清空画布

cxt.clearRect(0,0,mycanvas.width,mycanvas.height);

实心的 fill
设置画笔颜色

cxt.fillStyle = 'rgba(0,0,255,0.3)';

设置要添加到画布中的文字信息

cxt.font = "80px Arial";

使用个人设定好的工具进行绘制

cxt.fillText('Hello Canvas',80,80);

空心的 stroke
绘制空心文字

cxt.strokeStyle = 'red';
cxt.strokeText('Hello Canvas',80,180);

画线

context.beginPath();//1.开始绘制路径
context.strokeStyle = 'red';//2.指定颜色
context.moveTo(100,100);//3.移动画笔
context.lineTo(500,100);//4.连接起始位置和终止位置
context.stroke();//5.结束绘制
context.closePath();

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 lzdong@foxmail.com