欢迎点击: 个人官网博客
基本用法
使用canvas元素，首先设置width和height属性，为其设置绘制区域的大小，或者js设置宽高，当用户的浏览器不支持canvas元素时会显示，用于友好地提示用户。
<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
1.获取绘图上下文，而取得上下文对象的引用，需要调用getContext()方法，并传入上下文参数"2d"，这样就能取得2D上下文对象。
let canvas = document.querySelector('#mycanvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
window.addEventListener('resize', function () {
//画布大小跟随窗口变
canvas.width = window.innerWidth
canvas.height = window.innerHeight
})
if (!canvas.getContext) return; //检查是否支持绘制对象]
let ctx = canvas.getContext('2d') //获取绘制对象
//.........
//此处开始绘制代码
//.........
let imgURL = canvas.toDataURL("image/png"); //默认图片格式为png，也可以自定义设置格式
//获取整个画布的像素数据
let imageData= ctx.getImageData(0, 0, canvas.width, canvas.height);
//显示图片
var image = document.createElement("img"); //添加一个img元素
image.src = imgURL; //将获取的图像的URL赋值给src属性
document.body.appendChild(image); //将元素添加到页面中
2. 直线，矩形，圆，二次贝塞尔曲线，图片，文本，阴影，线性/径向渐变，样式状态版本保存回退，globalCompositeOperation合成等在canvas中应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
background-color: #fafafa;
}
</style>
<body>
<canvas width="1000" height="820" id="mycanvas">
<span>您的浏览器不支持canvas,请更新！</span>
</canvas>
</body>
<script>
window.onload = function () {
let canvas = document.querySelector('#mycanvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
window.addEventListener('resize', function () {
//画布大小跟随窗口变
canvas.width = window.innerWidth
canvas.height = window.innerHeight
})
if (!canvas.getContext) return; //检查是否支持绘制对象]
let ctx = canvas.getContext('2d') //获取绘制对象
// ================连接线
ctx.strokeStyle = 'green' //描边颜色
ctx.lineWidth = '10' //描边宽度
ctx.lineJoin = 'round' //连接处样式
ctx.lineCap = 'round' //线路径两端处样式
// =================矩形
ctx.strokeRect(10, 10, 200, 100)
// --------------------
ctx.fillStyle = 'red' //填充颜色
ctx.fillRect(400, 0, 200, 100)
// --------------------
ctx.clearRect(400, 0, 200, 100) //清空，重新绘制，并设置透明
// =================路径
ctx.moveTo(800, 10)
ctx.lineTo(800, 60)
ctx.stroke() //绘制
ctx.beginPath() //重新开路径
ctx.save() //保存之前样式状态
ctx.lineWidth = '1'
ctx.restore() //回退一个样式状态版本
ctx.moveTo(600, 10)
ctx.lineTo(600, 60)
ctx.lineTo(300, 60)
ctx.closePath() //闭合路径
ctx.stroke() //绘制
// // =================圆
// ctx.beginPath()
// ctx.arc(300, 300, 50, 90, 2 * Math.PI, false) //x坐标，y坐标，半径，开始角度，结束角度，方向
// ctx.closePath()
// ctx.stroke()
// ctx.beginPath()
// ctx.moveTo(300, 450)
// ctx.arcTo(550, 50, 550, 550, 50) //第一个点的xy坐标，第二个点的xy坐标，半径
// ctx.closePath()
// ctx.stroke()
// // =================二次贝塞尔曲线
// ctx.beginPath()
// ctx.moveTo(50, 200)
// ctx.quadraticCurveTo(200, 50, 250, 180); //第一个点的xy坐标(即高点/)，第二个点的xy坐标，半径
// ctx.stroke()
// ctx.beginPath()
// ctx.bezierCurveTo(50, 50, 200, 150, 150, 300);
// ctx.stroke()
// // =================图片
// ctx.beginPath()
// let img = new Image()
// img.src = './image/0.jpg'
// img.onload = function () {
// var pattern = ctx.createPattern(img, 'repeat');
// ctx.fillStyle = pattern
// ctx.fillRect(0, 0, 200, 200)
// ctx.drawImage(img, 0, 300, 100, 100);drawImage(要绘制的图像, x, y, w, h); 其中，w、h分别表示图像的尺寸。
//drawImage()方法接收9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。
// }
// // =================线性渐变
// ctx.beginPath()
// let gra = ctx.createLinearGradient(800, 10, 1000, 10); //开始点的xy坐标，结束点的xy坐标
// gra.addColorStop(0, 'red');
// gra.addColorStop(1, 'blue');
// ctx.fillStyle = gra
// ctx.fillRect(800, 0, 200, 400)
// // =================径向渐变
// // ctx.beginPath()
// // let gra = ctx.createRadialGradient(900, 50, 50, 900, 50, 100); //第一个圆xy坐标半径，第二个
// // gra.addColorStop(0, 'red')
// // gra.addColorStop(0.5, 'green');
// // gra.addColorStop(1, 'blue');
// // ctx.fillStyle = gra
// // ctx.fillRect(800, 0, 300, 400)
// // =================绘制文本
// ctx.beginPath()
// ctx.font='40px sans-serif'
// ctx.textAlign='center'
// ctx.textBaseline='middle';//基线对齐
// // ctx.textBaseline='top | hanging | middle | alphabetic | ideographic | bottom';
// ctx.fillStyle=gra///字体/填充颜色
// ctx.strokeStyle = '#ccc' //描边颜色
// //阴影
// ctx.shadowOffsetX=2;//阴影偏移量
// ctx.shadowOffsetY=2;//阴影偏移量
// ctx.shadowColor='green';//阴影颜色
// ctx.shadowBlur=2;//阴影模糊度
// ctx.strokeText('好开心哦', 600, 600);//空心文本
// ctx.fillText('好开心哦', 800, 600)//实心文本
// let mt=ctx.measureText('好开心哦');
// console.log(mt.width)//获取的是字体的宽度
// // ========================
// //获取整个画布的像素数据
// let imageData= ctx.getImageData(0, 0, canvas.width, canvas.height);
// console.log(imageData)//(r,g,b,a)
//获取图像的数据URL
var imgURL = canvas.toDataURL("image/png"); //默认图片格式为png，也可以自定义设置格式
console.log(imgURL)
}
</script>
</html>
globalCompositionOperation 表示 后绘制的图像 怎样与 先绘制的图像结合
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
background-color: #fafafa;
}
</style>
<body>
<canvas id="mycanvas">
<span>您的浏览器不支持canvas,请更新！</span>
</canvas>
</body>
<script>
window.onload = function () {
let canvas = document.querySelector('#mycanvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
window.addEventListener('resize', function () {
//画布大小跟随窗口变
canvas.width = window.innerWidth
canvas.height = window.innerHeight
})
if (!canvas.getContext) return; //检查是否支持绘制对象
let ctx = canvas.getContext('2d') //获取绘制对象
ctx.globalAlpha=0.5;//设置透明度//全局透明
ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 100)
ctx.globalCompositeOperation = 'lighter'; //用来合成
// source-over:默认--新的覆盖老的
// source-in:显示新的重叠部分，其他透明
// source-out:显示新的不重叠部分，其他透明
// source-atop:显示新的重叠部分和老的，其他透明
// destination-over:新的在老的下面
// destination-in:显示老的重叠部分，其他透明
// destination-out:显示老的不重叠部分，其他透明
// destination-atop:显示老的重叠部分和新的，其他透明
//lighter:都显示，重叠的颜色处理了
ctx.fillStyle = 'green'
ctx.fillRect(100, 100, 100, 100)
}
</script>
</html>