1 canvas的定义
用于在网页实时生成图像，并且可以操作图像内容。
2 怎么实现
1）html页面：定义一个canvas标签，canvas本身并不绘制图形，它只是相当于一张空的画布。
<canvas id="myCanvas" width="200" height="100"></canvas>
2）js:获取这个canvas的上下文环境context,很多实现的api都是它提供的；canvas是画布，context相当于画笔
var canvas = document.querySelector(‘#name‘);
var cantext = canvas.getContext(‘2d‘);
3 context的api
1) 画线
context.beginPath() 清除之前的路径并开始一个新的路径
context.moveTo(x,y) 设置线段的起点
context.lineTo(x,y) 设置线段的经过点
context.closePath() 是画笔返回到当前路径的起点， 自动绘制一段当前点到起点的直线，形成有一个封闭图形
context.stroke() 使用当前的样式描边路径
context.fill() 使用当前的样式填充路径
context.strokeStyle() 图形边线的颜色和样式
context.fillStyle() 图形边线的颜色和样式
1 cantext.beginPath() 2 cantext.moveTo(100,100) 3 cantext.lineTo(500,500) 4 cantext.lineTo(100,500) 5 cantext.closePath() 6 //设置线条样式并绘制线条 7 cantext.lineWidth = 5 8 cantext.strokeStyle = "#005588"
2) 矩形
context.fillRect(x,y,w,h) 绘制填充矩形
context.strokeRect(x,y,w,h) 描边矩形
context.clearRect(x,y,w,h) 清除某个矩形区域的内容
四个参数分别是矩形左上角的x,y坐标以及矩形的宽高
context.fillStyle = "#005588"
context.fillRect(100,400,200,200)
3) 圆形
context.arc(x,y,r,startAngle,endAngle,anticlockwise) 绘制一段圆弧路径，圆心在x,y，半径为r,默认为顺时针方向从startAngle 开始绘制，到 endAngle 结束,anticlockwise默认为false
1 //画圆 context.arc 有6个参数，一个是圆心位置，圆半径，圆弧开始与结束,逆时针 2 context.beginPath() 3 context.arc(200,200,100,0,1.5*Math.PI) 4 context.stroke() 5 //逆时针为true 6 context.beginPath() 7 context.arc(500,200,100,0,1.5*Math.PI,true) 8 context.stroke()
4) 绘制文本
context.font = "bold 50px Arial" 字体设置。 默认值 10px sans-serif。
context.textAlign = "middle" 文本对齐设置： start (默认), end, left, right 或 center.
context.textBaseline = "top" 基线对齐设置： top, hanging, middle, alphabetic (默认),ideographic, bottom.
context.fillText("== watermark ==",20,50) 在(x,y)位置绘制（填充）文本
context.strokeText(con,x,y) 绘制（描边）文本。
5) 绘制图像
context.drawImage(image,0,0,canvas.width,canvas.height) canvas允许将图像文件插入画布，在读取图片后，使用drawImage在画布进行重绘;
第一个参数是图像文件的DOM元素（即<img>节点），第二个和第三个参数是图像左上角在画布中的坐标，
下面是drawImage给图片加上水印的应用：
1 <!DOCTYPE html> 2 <div class="content"> 3 <canvas id="name" width="800" height="800" style="border:1px solid #aaa;margin:50px auto;display: block;"></canvas> 4 <canvas id="watermark" width="430" height="100" style="border:1px solid #aaa;margin:50px auto;display: none;"></canvas> 5 6 </div> 7 <script> 8 var canvas = document.getElementById("name"); 9 var context = canvas.getContext("2d"); 10 //水印的canvas 11 var canvas2 = document.getElementById("watermark"); 12 var cantext2 = canvas2.getContext("2d"); 13 var image = new Image() 14 window.onload = function(){ 15 canvas.width = 800; 16 canvas.height = 600; 17 image.src = "a.jpg"; 18 //由于图像的载入需要时间，drawImage方法只能在图像完全载入后才能调用 19 image.onload = function(){ 20 context.drawImage(image,0,0,canvas.width,canvas.height) 21 //在第一个放置图片的画布放上第二个水印画布 22 context.drawImage(canvas2, canvas.width - cantext2.width, canvas.height - cantext2.height) 23 } 24 //水印的样式 25 cantext2.width = 430 26 cantext2.height = 100 27 cantext2.font = "bold 50px Arial" 28 cantext2.fillStyle = "rgba(0,0,0,0.5)" 29 cantext2.textBaseline = "middle" 30 cantext2.fillText("== watermark ==",20,50) 31 32 } 33 </script>
6) 像素控制
context.getImageData(0, 0, canvas.width, canvas.height) 读取canvas图片内容，返回一个对象，包含了图片每个像素的信息；
getImageData()返回三个参数，data,width,height;其中data的值是一个一维数组，长度等于图形的像素宽*高*4；值依次是每个像素的红、蓝、绿、透明值；
context.putImageData() 将重新设置的数据绘制到位图上。
例子：实现图片的灰色滤镜
1 //简单小图形，求像素值 2 var c=document.getElementById("myCanvas"); 3 var ctx=c.getContext("2d"); 4 ctx.fillStyle="green"; 5 ctx.fillRect(10,10,50,50); 6 function copy(){//因为是50*50*4 所以imgData长度为10000 7 var imgData=ctx.getImageData(10,10,50,50); 8 console.log(imgData) 9 ctx.putImageData(imgData,10,70); 10 } 11 //过滤按钮 12 //getImageData这个函数，必须在服务器端运行，如果没有服务器环境（比如，只是一个本地的 html网页，操作本地的一张图片），会报错误 13 btn.onclick = function(){ 14 //contexta.getImageData()将获取当前图片的数据； 15 var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height ) 16 var pixelData = imageData.data //数组 17 for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){ 18 //该数组的长度等于图像的像素宽度 x 图像的像素高度, 19 var r = pixelData[i*4+0] 20 var g = pixelData[i*4+1] 21 var b = pixelData[i*4+2] 22 23 var grey = r*0.3+g*0.59+b*0.11 24 25 pixelData[i*4+0] = grey 26 pixelData[i*4+1] = grey 27 pixelData[i*4+2] = grey 28 } 29 //将改过的数据绘制到另一个画布上。 30 contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height ) 31 }
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D#%E7%BA%BF%E5%9E%8B
https://www.cnblogs.com/eaglesour/p/8948215.html
原文：https://www.cnblogs.com/willowTree/p/13951758.html