HTML5中的canvas为HTML5为更好的完成图形的绘制提供的画布。功能强大，具体使用方式为：
（1）在页面中嵌入<canvas></canvas>，为在不支持canvas的浏览器中给出准确的提示，可以在标签中嵌入适当的文本。如：
<canvas>您的浏览器不支持画布的使用</canvas>，这样在支持canvas的浏览器中，该文本不会显示出来。亦可以在代码中进行控制，如后面的代码所示。
（2）画布的大小一般不使用CSS样式表来控制，而使用width和height属性进行控制，以保证绘图的分辨率正常。如：
<canvas width="500" height="500" style="border:1px solid red"></canvas>，亦可以在代码中控制，如后面的代码所示。
（3）绘图使用一个非常重要的对象是“上下文”对象，通过canvas对象的getContext()方法获取，它是HTML5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图形的方法。
（4）使用上下文对象进行绘制。
（5）示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<canvas id="c1" width="1024" height="500" style="border:1px solid #aaa;display: block;margin: 0 auto;">你的浏览器不支持canvas</canvas>-->
<canvas id="c1" style="border:1px solid #aaa;display: block;margin: 0 auto;">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
window.οnlοad=function(){
var c = document.getElementById("c1");
c.width = 700; //该方法效果同属性设置
c.height = 500;
var context = c.getContext("2d"); //获取绘制2d图形的上下文对象
if(!context){
alert("你的浏览器不支持canvas");
}
};
</script>
</body>
</html>
1812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
