canvas元素用于在网页上绘制图形
那么什么是canvas?
HTML5的canvas元素使用脚本通常是用JavaScript在网页上绘制图像。画布是一个矩形区域,我们可以控制其每一个像素,通过<canvas>元素来绘制,canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
注意默认情况下<canvas>元素没有边框和内容
创建一个画布(canvas)
向html页面中添加canvas元素
规定元素的id,宽度和高度
<canvas id="myCanvas" width="200" height="100"><canvas>
注意:标签通常需要指定一个id属性脚本中经常引用
提示:可以在html页面中使用多个canvas元素使用style属性来加添加边框
使用JavaScript来绘制图像
canvas元素元素本身没有绘图能力。所有的绘制工作必须在JavaScript内部完成。
实例
<script>
var c =document.getELementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.fillRect(0,0,750,75);
</script>
实例解析
首先找到<canvas>元素,然后创建context对象,getContext(“2d”)对象是内建的HTML5对象,上面ctx的两个方法绘制了一个红色的矩形,通过fillStyle属性可以是css颜色,渐变,或图案。fillStyle默认设置是#000000黑色
fillRect(x,y,width,height)方法定义了矩形当前的填充方式。
通过canvas可以画出许多好看炫酷的特效!等待你来开发!