百木园-与人分享,
就是让自己快乐。

WEB前端第六十六课——H5新特性:canvas图形绘制

1.canvas描述

  canvas(画布)是H5提出的新标签,其目的是用于替代类似flash动画或游戏的插件,

  能够极大地减少页面结构大小,提高页面响应速度。

  说明:

    ⑴ canvas标签仅是一个图形容器,提供了一个可以绘制图像、图形的区域,可以实时渲染

     图形、动画、虚拟图像等,对快速绘图进行了大量优化;

    ⑵ 使用<canvas>标签习惯性在标签内部设置元素大小,以及进行不支持说明;

     示例:<canvas width:300px height:360px><p>浏览器不支持“canvas”!</p></canvas>

     当然,也可以通过CSS设置尺寸属性,还可以通过“if语句”判断浏览器是否支持canvas。

    ⑶ canvas标签除了提供绘图区域外,没有其他行为功能,其内部的所有内容都要通过脚本

     (JavaScript)进行绘制完成;

    ⑷ 使用canvas的基础模板:

<body>
<!--创建canvas画布,并设置区域大小-->
<canvas id=\"myCanvas\" width=\"200\" height=\"300\">
您的浏览器不支持Canvas!
</canvas>
<script>
// 获取canvas画布
var canvas=document.getElementById(\'myCanvas\');
// 在画布上创建画笔
var ctx=canvas.getcontext(\'2d\');
/* // 或通过if语句判断浏览器是否支持canvas
if (canvas.getcontext){
var ctx=canvas.getcontext(\'2d\');
}else {
canvas.innerText=\'浏览器不支持canvas!\';
}*/
// 在画布上绘制图形
ctx.fillRect(10,10,60,60);
</script>
</body>

来源:https://www.cnblogs.com/husa/p/14566044.html
图文来源于网络,如有侵权请联系删除。

未经允许不得转载:百木园 » WEB前端第六十六课——H5新特性:canvas图形绘制

相关推荐

  • 暂无文章