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