什么是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()
小试牛刀
1.简单画线demo
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();// 描边绘制
效果图
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);
效果图
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.生成海报
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);
}
效果图
小常识
Canvas的像素点
首先就是像素的问题，大家有没有遇到过Canvas模糊的问题，尤其是手机，这个现象尤为明显。那么有没有解决方案呢？答案是当然有！而且并不复杂，一个属性就可以搞定！
Canvas的尺寸其实又两个，不知道大家有没有发现。一个时Canvas的大小，一个是Canvas的样式大小。
canvas.width=cWidth
canvas.height=cHeight
canvas.style.width=cWidth
canvas.style.height=cHeight
复制代码
那么这就好解决的。我们的图片如果1:1放在手机上肯定是模的，但是我们会将图片的样式宽度减少一半以上，这样就不模糊了！Canvas也是同理，只要样式大小小于Canvas大小即可。那么小多少呢？有没有一个标准？这个时候就要借用window.devicePixelRatio这个参数了，告诉我们屏幕的像素比，如果没有就2，一般来说像素比是2的情况下，Canvas就不会模糊。
const dpr=window.devicePixelRatio||2
canvas.width=cWidth*dpr
canvas.height=cHeight*dpr
canvas.style.width=cWidth
canvas.style.height=cHeight
Canvas的图片跨域
1.服务端处理，Nginx配置允许跨域；
2.放到本地，嘻嘻~~~；
