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方法来跨域传送数据

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180706G0M06P00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券