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";

猜你喜欢

转载自www.cnblogs.com/hzqzwl/p/12041539.html