H5 新增标签canvas 画布

Posted 2021-03-23 hzqzwl

canvas是写在body中的标签，设置宽高后，通过JS来往其中绘制想要的内容，

canvas可以理解为一个画板，而JS就是你的画笔、

1.获取到画布

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

2.getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

var cxt = canvas.getContext("2d")

绘制文字

1.先设置字体样式

　　cxt.font = "bold 30px 黑体 ";

2.设置字体颜色

　　cxt.fillStyle = ‘green‘;

3.设置字体内容

　　cxt.fillText(‘我是文字‘,50,60)
　　在字体内容中，cxt.fillText（文本内容，X轴，Y轴）

并且在文本内容中，fill为实心，stroke为空心

fillStyle适用于所有实心内容；

strokeStyle适用于所有空心内容；

绘制矩形（以坐上角为绘制点）：

fill  /  stroke  Rect(x,y,w,h)

x : x轴的位置

y:y轴的位置

w:矩形的宽

h:矩形的长

 

绘制矩形阴影

　阴影模糊距离

ctx.shadowBlur=20;
阴影模糊颜色

ctx.shadowColor="black";