html canvas分析

什么是canvas？

HTML5 <canvas> 元素用于图形的绘制，通过JavaScript来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

canvas的兼容性

canvas怎样使用？

Document.getElementById() 方法获取HTML <canvas> 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

由 CanvasRenderingContext2D 接口完成实际的绘制。fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在(10, 10)，把它的大小设置成宽300高200。.

如图：

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(100,0);
ctx.lineTo(300,500); ctx.stroke();

效果如图：

Canvas写文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="50px Arial";
ctx.fillText("Hi,LiMing",14,90);

使用canvas遇到的问题

1.如何设置不同的样式

在写样式前加入 ctx.beginPath();

注：canvas定义
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");

2.把canvas转为图片格式时内部加载的图片不显示

利用img的complete属性判断图片是否加载完成

var interval = setInterval(function () {
              if(img.complete == true ){
                 clearInterval(interval );
                 var base64 = canvas.toDataURL("image/png");
               }
        }, 500);

注：使用计时器没隔0.5秒检测一次，图片加载完成后取消计时器，把canvas转为图片格式，避免canvas转图片时内部的图片丢失