canvas温习
-
参考地址：https://www.runoob.com/w3cnote/html5-canvas-intro.html
这篇文章系统的把canvas的api罗列出来，可以很清晰的了解到canvas能够做哪些事情。学习canvas真的看这一偏就够了，推荐。
练习代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <canvas id="canvas" width="1000" height="1000"></canvas> <body> <script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); // 画矩形 ctx.clearRect(0,0,300,300) ctx.fillStyle = "red"; ctx.fillRect(0, 0 , 100, 100); ctx.clearRect(0,0,50,50) ctx.strokeStyle = 'yellow'; ctx.strokeRect(100,100 ,100,100); // 画线(多条) ctx.strokeStyle= "red"; ctx.beginPath() ctx.moveTo(100,0); ctx.lineTo(150,0); ctx.lineTo(150,50); // ctx.closePath();//不封闭 ctx.stroke();//发起描边 // 画闭合图形（划线） 需用到closePath ctx.beginPath(); ctx.strokeStyle= "green" ctx.moveTo(150,0) ctx.lineTo(200,0); ctx.lineTo(200,50); ctx.closePath();//闭合 ctx.stroke(); // 绘制填充三角形 ctx.fillStyle= "red" ctx.beginPath(); ctx.moveTo(200,0) ctx.lineTo(250,0) ctx.lineTo(250,50) ctx.fill();//填充命令 会自动调用closepath // 绘制圆弧 ctx.beginPath() ctx.arc(275,25,25,0,Math.PI / 2,false);// 圆心：275 、 25 半径：25 起始角度 0 结束角度 90 顺时针：false ctx.stroke() // 绘制圆弧 通过两条线的切线画弧线 ctx.beginPath() ctx.moveTo(310,0) //起始点 ctx.arcTo(310,50,360,50,25) //控制点1:310 、 50 控制点2:360 、 50 半径：25 ctx.lineTo(360,50) //结束点 360 、 50 ctx.stroke() // 把以上3个点标出来 ctx.beginPath() ctx.fillStyle = 'black' ctx.fillRect(310,0,10,10) ctx.fillRect(310,50,10,10) ctx.fillRect(360,50,10,10) ctx.fill() // 标注3个点的文字 ctx.beginPath() ctx.fillStyle = "green" ctx.strokeStyle = "green" ctx.font= "14px 宋体" ctx.fillText("起始点",310,10) ctx.fillText("控制点1",310,50) ctx.strokeText("控制点2",360,50) // 绘制二次赛贝尔曲线 起始点、控制点、结束点 ctx.beginPath() ctx.moveTo(400,0) // 起始点 400 、 0 ctx.quadraticCurveTo(400, 50, 450, 50); // 控制点 400 、 50 结束点：450 、 50 ctx.stroke() // 样式调整 // fillStyle 填充颜色 // strokeStyle 描边颜色 // lineWidth 线宽 ctx.lineWidth = 20; //以起始点到结束掉为中心 上下各占一半 ctx.beginPath() ctx.moveTo(450, 10) ctx.lineTo(500,10) ctx.stroke() // 线条末端样式 butt：以方形结束（默认）、round：线段末端以原型结束 、 square：末端以方形结束，末端会多出线条宽度一半的厚度的方形 var lineCaps = ["butt", "round", "square"]; lineCaps.forEach((item,index) => { ctx.beginPath() ctx.moveTo(520 + (40 * index) ,30) ctx.lineTo(520 + (40 * index), 50) ctx.lineCap = item; ctx.lineWidth = 20; ctx.strokeStyle = 'black' ctx.stroke() }) // 画参考线 ctx.beginPath() ctx.moveTo(520,30) ctx.lineTo(600,30) ctx.moveTo(520,50) ctx.lineTo(600,50) ctx.lineWidth = 1; ctx.strokeStyle= 'red' ctx.stroke() // lineJoin 设置线条结合处的样式 round：圆角 、 bevel：平角 、 miter：默认 直角 var lineJoin = ['round', 'bevel', 'miter']; lineJoin.forEach((item,index) => { ctx.lineWidth = 10; ctx.strokeStyle = 'green' ctx.lineJoin = item; ctx.beginPath(); ctx.moveTo(650, 0 + index * 50); ctx.lineTo(700, 50 + index * 50); ctx.lineTo(750, 0 + index * 50); ctx.lineTo(800, 50 + index * 50); ctx.lineTo(850, 0 + index * 50); ctx.stroke(); }) // 虚线 // setLineDash 方法接受一个数组，来指定线段长度与间隙 // lineDashOffset属性设置起始偏移量 ctx.beginPath() ctx.lineWidth = 1 ctx.lineJoin = 'miter'; ctx.setLineDash([20, 5]); // [实线长度, 间隙长度] ctx.lineDashOffset = 0; ctx.strokeRect(900, 30, 80, 80); // 绘制文本 // fillText 填充文本 // strokeText 表变文本 // 文本样式 font 、 textAlign 、 textAlign 、 textBaseline 、 ctx.font = '50px 宋体' ctx.fillStyle = 'orange' ctx.fillText('填充字体',0,250,200);// 文本、x、y、maxWidth（可选） ctx.strokeStyle = 'blue' ctx.strokeText('描边字体',200,250,200)// 文本、 x、y 、 maxWidth（可选） // 画图 drawImage(img,x,y,width,height) // 如果是网络图片，需要在图片加载完再绘制 let img = new Image(); img.src = '../cesium/data/image/1.jpg' img.onload = () => { // ctx.drawImage(img,0,0) // 按图片原始宽高、以原点为起点，绘制在canvas上 ctx.drawImage(img,400,-250,100,50) //缩放 把图片整体缩放，绘制在某一个位置 ctx.drawImage(img,400,100,100,50,550,-250,100,50)// slice切片；默认图片以原点（0,0）位置，按图片的原宽高绘制在canvas上，前4个参数是在图片的某一位置截取一定宽高的区域，后4个参数是，把截取的图片放在canvas画布的某一个位置并设置宽高 } // 状态的保存和恢复 savs 、 restore // 每次save都会把当前的状态想栈中push // 每次restore，都会把栈最后面的pop出去， ctx.fillRect(650,200,50,50); ctx.save() ctx.fillStyle = 'red' ctx.fillRect(700,200,50,50) ctx.save() ctx.fillStyle = '#000' ctx.fillRect(750,200,50,50) ctx.restore();//加载之前的状态 恢复到最近这一次save的状态 也就是 fillStyle = red ctx.fillRect(800,200,50,50) // 变形 translate 用来移动canvas的原点到指定位置 ctx.save() ctx.translate(0,250)//坐标原点移动到 0 、 250 ctx.save() ctx.setLineDash([]);//恢复成实线 ctx.strokeRect(0, 0, 100, 100) ctx.translate(110,0)//坐标原点在当前的基础上向右移动110 也就是初始的（110,250） ctx.strokeRect(0, 0, 100, 100) ctx.save() ctx.restore() ctx.restore() ctx.restore() //原点恢复到初始的 0 、0 ctx.strokeRect(0, 0, 100, 100) // 旋转 rotate(angle) 顺时针 旋转的圆点为坐标原点 ctx.fillStyle = "red"; ctx.save() ctx.setLineDash([]) ctx.translate(250,250) //坐标原点移动到 250、 250 ctx.rotate(Math.PI / 180 * 45); // 顺时针旋转45度 ctx.strokeRect(0,0,60,60) // 要在旋转后画，否则 旋转将不生效 ctx.restore() //恢复到之前的状态 原点在0、0 且坐标系不旋转 ctx.setLineDash([]) ctx.strokeRect(350,250,100,100) ctx.save() // 缩放 scale(x,y) x,y坐标放大多少倍 1.2表示放大1.2倍 0.5表示缩小一半 ctx.scale(2,2) ctx.strokeRect(225,125,50,50); //未放大前的参数为 450 、 250 、 100 、 100 ctx.restore();//恢复到放大前的状态 ctx.strokeRect(550,250,100,100); // 合成 ctx.font='50px 楷体' ctx.strokeStyle='red' ctx.fillText('合成',0,400) ctx.font='10px 楷体' ctx.fillStyle='blue' ctx.fillText('男儿当自强',200,400) ctx.beginPath() ctx.lineWidth = 1; ctx.moveTo(0,405) ctx.lineTo(1000,405) ctx.closePath() ctx.stroke() ctx.save() // globalCompositeOperation // source-over: 后画的把之前的覆盖 默认值 // source-in: 只显示重叠区域 // source-out: 只显示新图像的未与老图像重叠的部分 // source-atop： 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。 // destination-over:新图像在老图像下面 // destination-in： 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。 // destination-out: 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。 // destination-atop:老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。 // lighter:保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的) blue: #0000ff + red: #ff0000 = #ff00ff // darken: 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的) blue: #0000ff + red: #ff0000 = #000000 // xor: 重叠部分会变成透明。 // copy: 只有新图像会被保留，其余的全部被清除(边透明)。 ctx.translate(0,450)//将坐标原点设置在 0 、 250 ctx.save() ctx.font = '20px 楷体' ctx.fillText('默认 source-over',0,-10) ctx.fillStyle='blue' ctx.fillRect(0,0,100,100) ctx.globalCompositeOperation = "source-over"; ctx.fillStyle='red' ctx.fillRect(50,50,100,100) ctx.save() // 裁剪路径 clip() // 把已经创建的路径转换成裁剪路径。 // 裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。 // 注意 clip() 只能遮罩在这个方法调用之后绘制的图像，如果是 clip() 方法调用之前绘制的图像，则无法实现遮罩。 ctx.beginPath() ctx.fillText('裁剪 clip',200,-10) ctx.arc(250,50,50,0,Math.PI * 2);//顺时针 ctx.save(); ctx.clip(); ctx.fillStyle = 'blue' ctx.fillRect(200,0,100,100) ctx.restore()//恢复裁剪之前的状态 ctx.fillRect(300,0,100,100) // 动画 我们可以用 setInterval 、 setTimeOut 、 requestAnimationFrame 不断的画canvas，实现动画 ctx.save() let sun,earth,moon,sunLoadSuccess = false,earthLoadSuccess = false,moonLoadSuccess = false; let init = () => { //初始化 ctx.translate(400,0);//将坐标原点移动到 400 、 0 ctx.save() ctx.clearRect(0, 0, 400, 400); //清空所有的内容 ctx.fillStyle = 'black' //画一张400 * 400 的画布 ctx.fillRect(0,0,400,400) sun = new Image(); earth = new Image(); moon = new Image(); sun.src = '../cesium/data/image/sun.jpg' earth.src = '../cesium/data/image/earth.jpg' moon.src = '../cesium/data/image/moon.jpg' sun.onload = () => { sunLoadSuccess = true; draw() } earth.onload = () => { earthLoadSuccess = true; draw() } moon.onload = () => { moonLoadSuccess = true; draw() } } init() var draw = () => { if (sunLoadSuccess && earthLoadSuccess && moonLoadSuccess){ ctx.clearRect(0, 0, 400, 400); //清空所有的内容 ctx.fillStyle = 'black' //画一张400 * 400 的画布 ctx.fillRect(0,0,400,400) ctx.save() ctx.translate(150,150);//圆心 移动到 150 、 150 // 把太阳图片的四角用圆裁剪掉 ctx.arc(50,50,50,0,Math.PI * 2); ctx.save() ctx.clip() ctx.save() ctx.restore()//取消裁剪 //绘制太阳 ctx.drawImage(sun, 0, 0, 100, 100); ctx.restore() // 绘制地球轨道 ctx.translate(50,50);//圆心 移动50 、 50 ctx.beginPath() ctx.strokeStyle = "rgba(255,255,0,0.5)"; ctx.arc(0,0,100,0,Math.PI * 2) ctx.stroke() // 绘制地球 let time = new Date(); ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()) ctx.translate(-100, 0); ctx.beginPath() // 裁剪一下地球 ctx.arc(0,0,14,0,Math.PI * 2); ctx.save() ctx.clip() ctx.drawImage(earth, -15, -15,30,30) ctx.restore() // 绘制月球轨道 ctx.beginPath(); ctx.strokeStyle = "rgba(255,255,255,.3)"; ctx.arc(0, 0, 40, 0, 2 * Math.PI); ctx.stroke(); //绘制月球 ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds()); ctx.translate(40, 0); ctx.drawImage(moon, -3.5, -3.5); ctx.restore() } requestAnimationFrame(draw) }; draw() </script> </body> </html>
将所有的案例画在一张canvas画布上面。
效果：
其它：
isPointInPath：判断当前点是否在 绘制区域内
ctx.rect(20,20,150,100); if (ctx.isPointInPath(100,100)) { ctx.stroke(); };
measureText: 检查文字宽度
ctx.measureText('达大厦')
-
