怎么使用H5的canvas元素

本篇内容主要讲解“怎么使用H5的canvas元素”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用H5的canvas元素”吧!

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

　　Canvas元素浏览器不兼容问题

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

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

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

　　2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

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

　　//例如：

　　<canvasid="cavsElem">

　　你的浏览器不支持canvas，请升级浏览器

　　</canvas>

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

　　使用Canvas元素创建画布

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

　　注意：

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

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

　　可以给canvas画布设置背景色

　　1.3canvas坐标系

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

　　绘制线径

　　获取上下文对象(CanvasRenderingContext2D)

　　首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，使用该对象就可以在画布上绘图了。

　　varmcanvas=document.getElementById("mcanvas");

　　varmcontext=mcanvas.getContext("2d");

　　设置绘制起点(moveTo)

　　//语法：

　　ctx.moveTo(x,y);

　　*解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置。

　　*参数：x,y都是相对于canvas坐标系的原点（左上角）。

　　*注意：绘制线段前必须先设置起点，不然绘制无效。如果不进行设置，就会使用lineTo的坐标当作moveTo

到此，相信大家对“怎么使用H5的canvas元素”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！