html5之canvas（一）

canvas

html5中新增标签canvas

canvas是一个用来展示绘图效果的标签，它和img类似，都是行内块元素。

同一个页面可以拥有多个canvas标签。

画布默认300*150，要设置画布的宽高，需要借助canvas元素的属性。

<canvas id="myCanvas" width="200" height="200" style="border:1px solid">your browser does not support the canvas tag </canvas>

canvas中有很多的方法和属性，都需要写在Javascript脚本中的：

canvas的属性：

---

简单介绍几个属性使用方法：

HTML 5 canvas strokeStyle 属性
绘制一个矩形。请用蓝色的笔触颜色：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";//设置描边颜色，必须放在绘制之前
ctx.strokeRect(20,20,160,160);

代码运行结果：

其他详细属性参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp

canvas的方法：

---

简单介绍几个方法使用案例：

HTML5 canvas fillRect() 方法
绘制 100*100 像素的已填充矩形：

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FFff00';
ctx.fillRect(50,50,100,100);

代码运行结果：

HTML5 canvas moveTo() 方法
开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,50);
ctx.stroke();

代码运行结果：

其他详细方法参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp