canva海报-canva绘制海报01：canvas绘制图片并解决导出后略模糊问题

canva如何设计海报。海报设计是一篇关于设计图片的文章,所以我们要知道图片与图片的结合,这样才能让消费者更加印象深刻,而设计一张宣传单并没有多么困难,那么下面就给大家简单介绍一下1、文字要清楚简洁。当用户看到海报时,他们一般不会有很多耐心。因此,我们需要用很简单的图片来表达,让消费者容易理解,有利于企业的推广。所以下面的小系列就给你简单介绍一下这方面的常识。2、色彩要符合受众的审美情趣。当海报作为宣传的一个载体时,它通常被放置在海报的中心,或者被放在中心,因为它成为整个海报的基础。许多优秀的现代海报作品在观众的视觉中留下了很好的印象。3、要具有创新精神。海报设计创新是为了引起人们对设计的好奇心。

另外,

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 在高清屏中绘制模糊的问题,

清晰。canva做的海报只要在打印输出时将分辨率调到300-350dpi/inch就是清晰的,这样可以更好的和打印机匹配。