一、什么是 Canvas

Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。

二、Canvas 的使用领域游戏（h5小游戏，利用canvas（画布）可以实现硬件加速，因为好的流畅性能带给玩家更好的体验）大数据可视化数据banner 广告多媒体模拟仿真远程操作图形编辑（添加水印，马赛克，缩放，滤镜）三、Canvas 的基本用法使用 canvas 标签, 即可在页面中开辟一格区域，可以设置其宽高，宽高为 300 和 150

<canvas></canvas>

获取 dom 元素 canvas canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api。

var cas = document.querySelector('canvas')

通过 cas 获取上下文对象(画布对象)。

var ctx = cas.getContext('2d')

通过 ctx 开始画画（设置起点 设置终点 连线-描边）。

ctx.moveTo(10, 10)ctx.lineTo(100, 100)ctx.stroke()

四、小试牛刀

4.1 简单画线

html

<canvas width="200" height="200" style="border:1px solid black"></canvas>

js

var cas = document.querySelector('canvas');var ctx = cas.getContext('2d');//demo1 简单地线ctx.moveTo(0, 0);//设置开始位置ctx.lineTo(200, 200);// 设置终点位置ctx.closePath();// 自动连回原点ctx.lineTo(20, 100);ctx.stroke();// 描边绘制

效果图

4.2 画网格

html

<canvas width="200" height="200" style="border:1px solid black"></canvas>

js

function drawGrid(color, stepx, stepy) {    ctx.save()    ctx.fillStyle = 'black';    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);    ctx.lineWidth = 0.5;    ctx.strokeStyle = color;    for (var i = stepx; i < ctx.canvas.width; i += stepx) {        ctx.beginPath();        ctx.moveTo(i, 0);        ctx.lineTo(i, ctx.canvas.height);        ctx.closePath();        ctx.stroke();    }    for (var j = stepy; j < ctx.canvas.height; j += stepy) {        ctx.beginPath();        ctx.moveTo(0, j);        ctx.lineTo(ctx.canvas.width, j);        ctx.closePath();        ctx.stroke();    }    ctx.restore();}drawGrid('green', 20, 20);

效果图

4.3 图片加水印

html

<canvas id="drawing" width="200" height="400" style="border:1px solid black">    <p>The canvas element is not supported!</p></canvas><div>  <span>    <input type="file" id="addImgHelper">  </span>  <span>    <button id="addWaterMark" disabled>添加水印</button>    <span>水印文字为</span>    <input id="waterMarkWords" type="text" value="我是水印">  </span>  <a id="downloadImgHelper" href="#" download="带水印图片" style="display: none">下载带水印图片</a></div>

js

var W,H;$("#addImgHelper").change(function(e){    var file = e.target.files[0];    if(file && /image/.test(file.type)){        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function(){            var img = new Image();            img.src= reader.result;            img.onload = function() {                cas.width = W = img.width;                cas.height = H = img.height;                ctx.drawImage(img, 0, 0);                $('#addWaterMark').attr("disabled",false);                $('#addWaterMark').click(function () {                    ctx.clearRect(0, 0, W, H);                    ctx.drawImage(img, 0, 0);                    var str = $('#waterMarkWords').val();                    ctx.font = "bold 50px Arial";                    ctx.lineWidth = '1';                    ctx.fillStyle = 'rgba(255,255,255,0.5)';                    ctx.textBaseline = "bottom";                    ctx.textAlign = 'end';                    ctx.fillText(str, W - 10, H - 10, W / 2);                    $('#downloadImgHelper').show();                    $('#downloadImgHelper').attr("href",cas.toDataURL('image/png'));                });            }        }    }});

效果图

4.4 生成海报

html

<canvas width="640" height="956" style="border:1px solid black"></canvas>

js

var img = new Image();var img2 = new Image();img.src= './bg.png';img2.src= './code.png';img.onload = function() {    ctx.drawImage(img,0,0);    ctx.font="30px Arial";    ctx.fillText("分享海报，惊喜等你来！",150,900);}img2.onload = function() {    ctx.drawImage(img2,280,750,100,100);}

效果图

五、小常识

5.1 Canvas 的像素点

首先就是像素的问题，大家有没有遇到过Canvas模糊的问题，尤其是手机，这个现象尤为明显。那么有没有解决方案呢？答案是当然有！而且并不复杂，一个属性就可以搞定！

Canvas的尺寸其实又两个，不知道大家有没有发现。一个时Canvas的大小，一个是Canvas的样式大小。

canvas.width=cWidthcanvas.height=cHeightcanvas.style.width=cWidthcanvas.style.height=cHeight

那么这就好解决的。我们的图片如果1:1放在手机上肯定是模的，但是我们会将图片的样式宽度减少一半以上，这样就不模糊了！Canvas也是同理，只要样式大小小于Canvas大小即可。那么小多少呢？有没有一个标准？这个时候就要借用window.devicePixelRatio这个参数了，告诉我们屏幕的像素比，如果没有就2，一般来说像素比是2的情况下，Canvas就不会模糊。

const dpr=window.devicePixelRatio||2canvas.width=cWidth*dprcanvas.height=cHeight*dprcanvas.style.width=cWidthcanvas.style.height=cHeight

5.2 Canvas 的图片跨域

1.服务端处理，Nginx配置允许跨域。

2.放到本地。

5.3 Canvas 调试（Mac）web inspector

webkit.org

5.4 好用简单的封装库，特别适合移动端

mcanvas

文章来源：