HTML5的canvas绘图技术，你了解多少？浏览器兼容情况如何？

H5的绘图技术

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

1.1 浏览器不兼容问题

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

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

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

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

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

//例如：

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

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

1.2 创建画布

在页面中创建元素与创建其他元素一样，只需要添加一个标记即可。该元素默认的宽高为300*15，可以通过元素的width属性和属性改变默认的宽高。

注意：

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

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

可以给画布设置背景色

1.3 坐标系

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

1.4 绘制线径

获取上下文对象(xt2D)

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

var = .(“”);

var = .(“2d”);

2.设置绘制起点()

//语法：

ctx.(x, y);

3.绘制直线()

//语法：

ctx.(x, y);

4.路径的开始和闭合

//开始路径：

ctx.();

//闭合路径：

ctx.();

5.绘制图形()

//语法：

ctx.();

在绘制之前，还可以对画笔的颜色和粗细进行设置进行设置，方法如下：

//语法：

ctx. = “#”;

ctx. = 4; //值为不带单位的数字，并且大于0

6.填充图形(fill)

//语法：

ctx.fill();

在填充之前，同样可以对所填充的颜色进行设置，方法如下：

//语法：

ctx. = “#”;

7.绘制的基本步骤：

第一步：获得上下文 =>.(‘2d’);

第二步：开始路径规划 =>ctx.()

第三步：移动起始点 =>ctx.(x, y)

第四步：绘制线(线条、矩形、圆形、图片…) =>ctx.(x, y)

第五步：闭合路径 =>ctx.();

第六步：绘制描边 =>ctx.();

案例：通过上面所学的方法绘制一个三角形。

复制代码

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

复制代码

案例：理解基于状态的绘图

复制代码

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

复制代码

复制代码

.width = 900; //重新设置标签的属性宽高

. = 600; //千万不要用 .style.

    mcanvas.style.border = "1px solid #000";    //设置canvas的边
    mcontext.strokeStyle = "#ff0000";    //设置画笔的颜色
    mcontext.lineWidth = 2;                //设置画笔的粗细
    mcontext.fillStyle = "#00ff00";        //设置填充图形的颜色
    //绘制三角形
    mcontext.beginPath();        //开始路径
    mcontext.moveTo(100,100);    //三角形，左顶点
    mcontext.lineTo(300, 100);   //右顶点
    mcontext.lineTo(300, 300);   //底部的点
    mcontext.closePath();        //结束路径
       mcontext.stroke();           //描边路径       
    //mcontext.fill();             //填充图形
    //绘制矩形
    mcontext.beginPath();    //开启了一个新状态（新线径），
                          //新状态可以继承之前状态的样式，
                          //但是当前状态设置的所有样式只能用于当前状态。

//. = “#”;//为当前状态设置的样式

.(500,100); //起始点

.(800,100); //上边

.(800,300); //右边

.(500,300); //下边

.();

.();

复制代码

1.5 绘制矩形

快速创建矩形rect()方法

语法：ctx.rect(x, y, width, );

2.创建描边矩形

语法：ctx.(x, y, width, );

参数跟rect(x, y, width, )相同，注意此方法绘制完路径后立即进行绘制。

3.创建填充矩形

语法：ctx.(x, y, width, );

参数跟rect(x, y, width, )相同， 此方法执行完成后，立即对当前矩形进行fill填充。

4.清除矩形（）

语法：ctx.(x, y, width, );

复制代码

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

复制代码

1.6 绘制圆形

arc() 方法用于创建弧线（用于创建圆或部分圆）。

语法：ctx.arc(x, y, r, , , );

复制代码

解释：

x,y：圆心坐标。

r：半径大小。

:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。

:结束的角度，注意是弧度。

：是否是逆时针，默认是false。true是逆时针，false：顺时针

注意：弧度和角度的转换公式： rad = deg*Math.PI/180;

复制代码

绘制圆形和饼图

复制代码

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

复制代码

三角函数的补充：

Math.sin(弧度); //夹角对面的边 和 斜边的比值

Math.cos(弧度); //夹角侧边与斜边的比值

圆形上面的点的坐标的计算公式

x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

y =y0 + Math.sin(rad) * R;//注意都是弧度

1.7 绘制文字

提供了两种方法来渲染文本:

(text, x, y

,

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

(text, x, y

,

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

示例1

文本用当前的填充方式被填充：

var ctx = .(‘’).(‘2d’);

ctx.font = “48px serif”;

ctx.(“Hello world”, 10, 50);

示例2

文本用当前的边框样式被绘制：

var ctx = .(‘’).(‘2d’);

ctx.font = “48px serif”;

ctx.(“Hello world”, 10, 50);

文本样式

font = value: 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

= value: 文本对齐选项. 可选的值包括：start, end, left, right or . 默认值是 start。

= value: 基线对齐选项. 可选的值包括：top, , , , , 。默认值是 。

代码示例：

复制代码

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

复制代码

1.8绘制图像

1.基本绘制图片的方式

.(img,x,y);

参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

2.在画布上绘制图像，并规定图像的宽度和高度

.(img,x,y,width,);

参数说明：width 绘制图片的宽度， ：绘制图片的高度

如果指定宽高，最好成比例，不然图片会被拉伸

设置高 = 原高度 * 设置宽/ 原宽度;

3.图片裁剪，并在画布上定位被裁剪的部分

.(img,sx,sy,,,x,y,width,);

参数说明：

sx,sy 裁剪的左上角坐标，
swidth：裁剪图片的高度。 sheight:裁剪的高度

其他同上

4.用创建img对象

上面提供的3个方法，都需要一个Image对象作为参数，下面介绍了几种创建Image对象的方式。需要注意的是，为Image的src属性赋值后，Image对象会去装载指定图片，但这种装载是异步的，如果图片太大或则图片来自网络，且网络传输速度慢，Image对象装载图片就会需要：一定的时间开销。为了保证图片装载完成后才去绘制图片，可以监听Image对象的回调事件，然后在事件处理函数中绘制图片，如下所示：

第一种方式：

var img = .(“imgId”);

img. = (){ //图片加载完成后，执行此方法

.(img, 10, 10);

第二种方式：

复制代码

var img = .(“img”);

img.src = “img/a.jpg”;

img.alt = “谁笑谁是小狗”;

img. = (){ //图片加载完成后，执行此方法

.(img, 10, 10);

复制代码

第三种方式：

复制代码

var img = new Image();//这个就是 img标签的dom对象

img.src = “imgs/arc.gif”;

img.alt = “谁笑谁是小狗”;

img. = () { //图片加载完成后，执行此方法

}

绘制 代码 图片 ctx. 浏览器 复制