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