另外， img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性
**注意： **有部分网友评论img.setAttribute('crossOrigin', 'anonymous') 必须是写 在你赋值 img.src 之前，所以楼主写法有误 可以看看这个链接 去看看, https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror/27260385#27260385
效果图如下:
模糊在线demo
解决方案：
1.首先一样，获取 Canvas 对象：
2.获取像素比，将 Canvas 宽高进行放大，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。
3.按实际渲染倍率来缩放canvas。
注意基础知识点：
要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height；
要设置画布的实际渲染大小，使用的 style 属性或CSS设置的 width 和height，只是简单的对画布进行缩放。
4.绘制
效果图如下
优化后不模糊的在线demo
参考链接：
一个关于image访问图片跨域的问题,https://www.jianshu.com/p/8fa0fb53c183
解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported, https://www.jianshu.com/p/6fe06667b748
解决 canvas 在高清屏中绘制模糊的问题, https://www.html.cn/archives/9297
什么是 Canvas?HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas>标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 <canvas>元素来绘制.
注意: 默认情况下 <canvas>元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas>元素.
使用 style 属性来添加边框:
实例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000">
</canvas>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
实例
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.fillStyle="#FF0000"
ctx.fillRect(0,0,150,75)
例解析:
首先，找到 <canvas>元素:
var c=document.getElementById("myCanvas")
然后，创建 context 对象：
var ctx=c.getContext("2d")
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000"
ctx.fillRect(0,0,150,75)
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
坐标实例
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
X
Y
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:
JavaScript:
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.moveTo(0,0)
ctx.lineTo(200,100)
ctx.stroke()
尝试一下 »
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().
实例
使用 arc() 方法 绘制一个圆:
JavaScript:
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.beginPath()
ctx.arc(95,50,40,0,2*Math.PI)
ctx.stroke()
canvas作为html中的一个标签，可以在网页上生成一块画布，其中，画布是网页的元素，但是画布上的东西不是，浏览器认为canvas是个图片，可以右键保存。在这里插入图片描述
画布有默认的宽和高，是300*150大小，画布的宽高不能通过style设置，只能通过canvas自己的属性设置。下面是一个基本画布的代码。
<style>
* {
margin: 0
padding: 0
}
canvas {
border:1px solid black
}
</style>
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
<body>
<canvas width="600" height="800"></canvas>
</body>
1
2
3
1
2
3
画笔是通过js编写的，画布的横纵坐标如下所示
在这里插入图片描述
下面通过代码认识画笔。
let canvas = document.querySelector('canvas') //获取画布元素
let ctx = canvas.getContext('2d') //创建画笔
console.log(ctx) //可以看到画笔的属性
ctx.moveTo(100,100)//画笔的起始位置
ctx.lineTo(200,200) //画笔的下一位置
ctx.lineTo(100,200)
ctx.fillStyle='red' // 图像填充颜色
ctx.strokeStyle = 'purple' // 线段颜色
ctx.lineWidth = '10'//线段宽度
ctx.fill() //展示属性
ctx.closePath()//闭合线段
ctx.stroke() //绘制！！放到最后写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
二、canvas绘制矩形
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 绘制矩形的第一种方法：描边矩形(矩形左上角的横坐标，矩形左上角的纵坐标，矩形长，矩形宽)
ctx.strokeRect(100,200,100,200)
// 第二种方法：填充矩形（参数含义相同） 默认黑色
ctx.fillStyle = 'pink'
ctx.fill()
ctx.fillRect(300,200,100,200)
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
三、canvas绘制圆形
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 绘制圆形
ctx.beginPath()
// 参数：x y r 起始弧度 结束弧度 是否逆时针绘制
// 对于弧度有个公示：360° = 2×PI
ctx.arc(100,100,50,0,2*Math.PI,true)
ctx.fillStyle = "red"
ctx.fill()
ctx.stroke()
// 绘制弧线
ctx.beginPath()
ctx.arc(200,200,50,1,2,false)
ctx.stroke()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
四、清除画布与绘制文字
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
ctx.fillRect(100,200,100,200)
// 清除画布
ctx.clearRect(100,200,50,50)
// 绘制文字
ctx.font = "20px 微软雅黑"
ctx.fillStyle = 'red'
ctx.fill()
ctx.fillText("绘制文字",50,20)
1
2
3
4
5
6
7
8
9
10
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）