【HTML+CSS基_H5之家 - 中国HTML5教程资源分享第一站

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>html5 canvas</title>
<style type=”text/css”>
body { margin: 0; padding: 0;}
div { width: 200px; height: 200px; border: 1px #000 solid;}
</style>
</head>
<body>
<canvas id=”oCanvas”></canvas>
<canvas id=”oCanvas1″></canvas>
<canvas id=”oCanvas2″></canvas>
<canvas id=”oCanvas3″></canvas>
<canvas id=”oCanvas4″></canvas>
<script type=”text/javascript”>
//==画矩形
var oCanvas = document.getElementById(“oCanvas”);
//创建context对象
var oContext = oCanvas.getContext(“2d”);
//绘制
oContext.fillStyle = “#ff0000″; //颜色
oContext.fillRect(0, 0, 200, 100); //矩形 x, y, w, h

//==画线
var oCanvas1 = document.getElementById(“oCanvas1″);
//创建context对象
var oContext1 = oCanvas1.getContext(“2d”);
//绘制
oContext1.moveTo(10, 10); //从x, y 开始
oContext1.lineTo(100, 50);//从开始的坐标点到现在的x, y 坐标点
oContext1.stroke();//画线

//==画圆
var oCanvas2 = document.getElementById(“oCanvas2″);
//创建context对象
var oContext2 = oCanvas2.getContext(“2d”);
//绘制
oContext2.fillStyle = “#ff0000″;
//开始绘制圆
oContext2.beginPath(); //start
oContext2.arc(50, 50, 20, 0, Math.PI*2, true); //路径
oContext2.closePath();//end
oContext2.fill(); //填充

//==绘制渐变
var oCanvas3 = document.getElementById(“oCanvas3″);
//创建context对象
var oContext3 = oCanvas3.getContext(“2d”);
//绘制
var grd = oContext3.createLinearGradient(0, 0, 200, 50);
grd.addColorStop(0,”#ff0000″);
grd.addColorStop(1,”#00ff00″);
oContext3.fillStyle = grd;
oContext3.fillRect(0, 20, 200, 50);

//==把一幅图放到画布上
var oCanvas4 = document.getElementById(“oCanvas4″);
//创建context对象
var oContext4 = oCanvas4.getContext(“2d”);
//绘制
var img = new Image();
img.src = “”;
oContext4.drawImage(img, 0, 0);
</script>
</body>
</html>