canvas教程

H5页面制作工具canvas绘图技术

字号+ 作者:H5之家 来源:H5之家 2017-11-24 14:19 我要评论( )

H5页面制作工具canvas绘图技术canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点。Canvas元素就像一块画布,通过该元素自带的API结合JavaScript

H5页面制作工具canvas绘图技术

canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点。Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

1.1 浏览器不兼容问题

ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持

只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)

移动端的兼容情况非常理想,基本上随便使用

2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

如果浏览器不兼容,最好进行友好提示,提示内容只有在浏览器不支持时才显示。

浏览器不兼容,也可以使用flash等手段进行优雅降级

广州html5培训

1.2 创建画布

在页面中创建canvas元素与创建其他元素一样,只需要添加一个

注意:

不能使用CSS样式控制canvas元素的宽高,否则会导致绘制的图形拉伸。

重新设置canvas标签的宽高属性会导致画布擦除所有的内容。

可以给canvas画布设置背景色

1.3 canvas坐标系

在开始绘制任何图像之前,我们先讲一下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点,水平方向为x轴,向右为正;垂直方向为y轴,向下为正。如下图所示:

广州达内web培训

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
>