Canvas 入门
创建Canvas标签，标签内部的元素会在浏览器不支持Canvas时提示
<canvas id="" width="" height="">
<p>我是 canvas 标签内的数据 </p>
</canvas>
通过getContext判断浏览器是否支持 Canvas
<canvas id="my-canvas" width="" height="">
<p>我是 canvas 标签内的数据 </p>
</canvas>
<script>
var canvas = document.getElementById('my-canvas');
if (canvas.getContext) {
console.log('支持');
} else {
console.log('不支持');
}
</script>
使用 fillText输出文本
fillText函数共有3个参数，（“文本内容”，“文本的水平位置”，“文本的垂直位置”）
<canvas id="my-canvas" width="" height="">
<p>我是 canvas 标签内的数据 </p>
</canvas>
<script>
var
canvas = document.getElementById('my-canvas'),
ctx = canvas.getContext('2d');
ctx.fillText('文本', 13, 14);
</script>
使用 drawImage、fillText为图片添加文字脚注
drawImage 将图片对象写到画布上，参数（“图片对象”，“图片起始水平位置”，“图片起始竖直位置”， “图片的宽”， “图片的高”）fillText 将文本内容输出fillStyle 设置文本的颜色
<img src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0" alt="" id="avatar" hidden>
<canvas id="my-canvas" width="500" height="500">
<p>我是 canvas 标签内的数据 </p>
</canvas>
<script>
var
canvas = document.getElementById('my-canvas'),
avatar = document.getElementById('avatar'),
context = canvas.getContext('2d');
context.drawImage(avatar, 0, 0, 500, 500);
context.fillStyle = 'cyan';
context.fillText('文本内容', 450, 490);
</script>
使用 drawImage实现图片的合成
crossorigin="Anonymous" 解决跨域问题toDataURL用于输出 Base64编码
<img crossorigin="Anonymous" src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png" alt="" id="border-img" hidden>
<img crossorigin="Anonymous" src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0" alt="" id="avatar" hidden>
<img src="" alt="" id="canvas-com">
<canvas id="my-canvas" width="500" height="500" hidden>
<p>我是 canvas 标签内的数据 </p>
</canvas>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<script>
var
canvas = document.getElementById('my-canvas'),
avatar = document.getElementById('avatar'),
border_img = document.getElementById('border-img'),
context = canvas.getContext('2d');
context.drawImage(avatar, 0, 0, 500, 500);
context.drawImage(border_img, 0, 0, 500, 500);
data_url = canvas.toDataURL();
$('#canvas-com').attr('src', data_url);
</script>
Canvas 中文文档
