html5学习二（canvas）

添加画布

<canvas id="myCanvas" width="200" height="100"></canvas>

通过javascript来绘制

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
下面代码画线

1 <script type="text/javascript">
2
3 var c=document.getElementById("myCanvas");
4 var cxt=c.getContext("2d");
5 cxt.moveTo(10,10);
6 cxt.lineTo(150,50);
7 cxt.lineTo(10,50);
8 cxt.stroke();
9
</script> 圆形

1 <script type="text/javascript">
2
3 var c=document.getElementById("myCanvas");
4 var cxt=c.getContext("2d");
5 cxt.fillStyle="#FF0000";
6 cxt.beginPath();
7 cxt.arc(70,18,15,0,Math.PI*2,true);
8 cxt.closePath();
9 cxt.fill();

</script> 渐变

1 <script type="text/javascript">
2
3 var c=document.getElementById("myCanvas");
4 var cxt=c.getContext("2d");
5 var grd=cxt.createLinearGradient(0,0,175,50);
6 grd.addColorStop(0,"#FF0000");
7 grd.addColorStop(1,"#00FF00");
8 cxt.fillStyle=grd;
9 cxt.fillRect(0,0,175,50);

</script> 图片

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>