H5 新增标签canvas 画布
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";
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25