canvas制作海报边框-如何解决 canvas 画的圆形边框粗糙

另外,

img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性

**注意: **有部分网友评论('crossOrigin', 'anonymous') 必须是写 在你赋值 之前,所以楼主写法有误 可以看看这个链接 去看看, #27260385

效果图如下:

模糊在线demo

解决方案:

1.首先一样,获取 Canvas 对象:

2.获取像素比,将 Canvas 宽高进行放大,放大比例为:devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。

3.按实际渲染倍率来缩放canvas。

注意基础知识点:

要设置canvas的画布大小,使用的是 和 ;

要设置画布的实际渲染大小,使用的 style 属性或CSS设置的 width 和height,只是简单的对画布进行缩放。

4.绘制

效果图如下

优化后不模糊的在线demo

参考链接:

一个关于image访问图片跨域的问题,

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported,

解决 canvas 在高清屏中绘制模糊的问题,

先选椭圆工具画出一个椭圆。然后进行填充一种颜色,然后点击菜单“选择”,点击变换选区,在上面设置参数栏中的W、H中输入边框宽度后按回车。然后按“Delete”键,清除掉中间的图形。这样就完成了一个边框。如果要变换颜色或清除掉边框中的颜色,只要把这个椭圆图层载入选区,进行填色或Delete就行了。

1、首先需要新建文件并创建画布。

2、接下来开始定义函数获取画布。

3、然后可以获取上下文。、

4、接着需要设置填充矩形的颜色。

5、接下来开始设置边框颜色和边框宽度。

6、最后开始绘制填充矩形和边框矩形。

7、最后输出完成图,可以看到绘制一个矩形。