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()　　// 执行填充

 

　　

 

来源：https://www.cnblogs.com/cuishuangshuang/p/12302952.html