H5 canvas的使用

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

 

//绘制矩形
		var canvas4 = document.getElementById('test_canvas4');//获取绘图区域
		var ctx4 = canvas4.getContext('2d');//让我们拿到一个CanvasRenderingContext2D对象
		ctx4.beginPath();
		ctx4.rect(20,20,50,100);
		ctx4.stroke();
		
		ctx4.beginPath();
		ctx4.rect(30,40,100,100);
		ctx4.lineWidth="4";
		ctx4.strokeStyle="red";
		ctx4.stroke();
		
		ctx4.beginPath();
		ctx4.rect(200,30,50,50);
		ctx4.lineWidth="5";
		ctx4.strokeStyle="#ff6300";
		ctx4.fillStyle="#0000FF"
		ctx4.stroke();
		ctx4.fill();
		
		ctx4.beginPath();
		ctx4.rect(200,100,50,50);
		ctx4.lineWidth="5";
		ctx4.strokeStyle="#ff6300";
		ctx4.fillStyle=gradient;
		ctx4.stroke();
		ctx4.fill();