canvas

1、html

<canvas id="canvas" width="300" height="150"></canvas>

2、js

var canvas = document.getElementById("canvas")  // 获取画布元素

var ctx = canvas.getContext("2d")  // 获取绘图对象

线

ctx.lineWidth = 3  // 线条宽度

ctx.strokeStyle = "red"  // 线条颜色

ctx.moveTo(0,0)  // 线条起点

ctx.lineTo(50,50)  // 线条终点

ctx.lineTo(100,100)  // 线条终点

ctx.stroke()  //执行上面代码

矩形

  ctx.rect(50,50,300,150)  // ctx.rect(左上角X坐标,左上角Y坐标,width,height)

  ctx.fillStyle = "#ccc"   // 填充颜色

  ctx.fill()  // 执行填充

相关推荐