canvas绘制问题

Canvas API是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。

通常，我们可能想要改变画布的大小，以下是大家最容易想到的方法：

//方法一：内联样式

//方法二：内部样式

...

//方法三：外部样式

canvas.css代码

#myCanvas {

width: 450px;

height:300px;

}

引入html中

...

但是canvas的宽高设置只能用内联样式。

canvas默认的宽度为300px高度为150px，若不设置内联样式不使用行内样式的时候绘制矩形，会绘制成一个变形的矩形。

首先，找到 元素:

var c=document.getElementById("myCanvas");

然后，创建context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

cxt.rect(250,250,100,100);//设置矩形路径

可以看到绘制的矩形并不是100*100的宽高，而是以默认宽高与当前设置的宽高的比例乘以矩形绘制的宽高，也就是宽：500/300*100，高：500/150*100

我们知道cxt.rect(250,250,100,100);的绘制起点是（200，200）但是他是从线的中间、外面还是里面开始绘制的呢？

现在我们来绘制一个1px的矩形边框，左边为div设置的border:1px solid #000;右边为canvas绘制的矩形边框。可以看到，右边的边框为2px，这是为什么呢？

答案是canvas的绘制是从线的中间开始的，而且他不识别0.5px，所以左右1px绘制出了2px的线。

当绘制线和填充的顺序不一样时，绘制的结果也会不一样

cxt.fill();//填充

cxt.stroke();//绘制线

cxt.stroke();//绘制线

cxt.fill();//填充

canvas关于getImageData跨域问题解决方法

一、问题：在使用html5的canvas是，当用到getImageData方法获取图片信息时，会碰到跨域无法获取的情况，代码如下：

在chrome会提示：

在IE中会提示："security error！"的错误信息

二、原因：

图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错！

（跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据，因为a.cn和b.cn是不同域,所以跨域就出现了.）

三、方法：

1.把图片放置在服务器中，通过服务器返回给客户端，遵循同源策略；

2.用firefox浏览器打开；

3.要解决跨域的问题，我们可以使用以下几种方法：

通过jsonp跨域

通过修改document.domain来跨子域

使用window.name来进行跨域

使用HTML5中新引进的window.postMessage方法来跨域传送数据