<!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><body> <canvas id="canvas" width="600" height="800" style="background-color: rgb(38, 139, 139); margin:20px"> </canvas> <script> /** @type {HTMLCanvasElement} */ let cDom=document.getElementById('canvas') let context=cDom.getContext('2d')// 第一局部 // 绘制线条 // context.moveTo(10,20) // context.lineTo(70,30) // context.lineWidth=12 // context.strokeStyle="red" // context.stroke() // context.moveTo(50,80) // context.lineTo(50,120) // context.lineWidth=7 // context.strokeStyle='pink' // context.stroke() //第二个图案， // context.beginPath() // context.moveTo(10,120) // context.lineTo(100,120) //新建门路API // context.lineWidth=5 // context.strokeStyle='black' // context.stroke() // 三角形， // context.beginPath() // context.moveTo(10,150) // context.lineTo(120,150) // context.lineTo(60,180) // context.closePath() //线路闭合API // context.fillStyle='green' //填充色彩 // context.fill() //填充 // context.lineWidth=3 // context.strokeStyle='pink' // context.stroke() // 矩形 // context.beginPath() // context.rect(20,180,40,50) // context.lineWidth=1 // context.strokeStyle='red' // context.stroke() // 空心矩形组合API // context.beginPath() // context.lineWidth=2 // context.strokeStyle="pink" // context.strokeRect(20, 240, 40, 50); // 实心矩形组合API // context.beginPath() // context.fillStyle="blue" // context.fillRect(30,200,40,50); // 第二局部弧线 //actTo 弧线原理： 三个控制点，x1,x2,x3,同时内切于 x1-x2 和 x2-x3 两条直线的内切圆 // context.beginPath(); // context.moveTo(200, 10); // context.arcTo(200, 100, 100, 10, 48); // context.lineWidth=3; // context.strokeStyle='pink'; // context.stroke(); // 辅助线 // context.beginPath(); // context.moveTo(200, 10); // context.lineTo(200, 100); // context.lineTo(100, 10); // context.closePath(); // context.lineWidth=1; // context.strokeStyle='red'; // context.stroke(); // arc画弧原理：确定圆心，半径，起始角度，终止角度，方向 // context.beginPath(); // context.arc(100, 200, 30, 0, Math.PI/3, false); // context.stroke(); // 二阶贝塞尔曲线：终点，起点，控制点 // context.beginPath(); // context.moveTo(130, 250); // context.quadraticCurveTo(130, 280, 160, 265); // context.stroke(); //3 绘图款式 // context.beginPath(); // context.moveTo(10, 20); // context.lineTo(200, 300); // context.lineWidth=5; // 默认值 // context.lineCap='butt'; // 圆角 // context.lineCap='round'; // 矩形 // context.lineCap='square'; // 虚线 // context.setLineDash([7,10,15,20,30]); // context.stroke(); // 线性突变 // context.beginPath(); // x1,y1,x2,y2 // let gradient= context.createLinearGradient(50,150,100,290) // gradient.addColorStop(0, 'pink'); // gradient.addColorStop(0.7, 'red'); // gradient.addColorStop(1, 'pink'); // context.fillStyle=gradient; // context.fillRect(25,150,200,150); // 径向突变 // context.beginPath(); // 圆心一，半径一，圆心二，半径二 // let gradient2=context.createRadialGradient(190, 440, 5, 140, 450, 80); // gradient2.addColorStop(0,'green') // gradient2.addColorStop(0.2,'pink') // gradient2.addColorStop(0.4,'green') // gradient2.addColorStop(0.6,'pink') // gradient2.addColorStop(0.8,'green') // gradient2.addColorStop(1,'pink') // context.fillStyle=gradient2; // context.fillRect(40,350,200,200); // 纹理款式 填充图片 // context.beginPath(); // let img1=new Image(); // img1.src='./mao.gif' // img1.onload=function(){ // let pattern=context.createPattern(img1, 'repeat'); // context.fillStyle=pattern; // context.fillRect(30,600,200,120); // } // 绘制文本 // context.beginPath(); // 字体款式 // context.font='200px Times New Roman'; // 暗影右偏移 // context.shadowOffsetX=2; // 暗影下偏移 // context.shadowOffsetY=6; // 暗影含糊度 // context.shadowBlur=6; // 暗影色彩 // context.shadowColor='red'; // 填充文本 // context.fillText(text, x, y, maxWidth); // 轮廓文本 // context.strokeText('hello', 150, 150); // 纹理填充 // let img=new Image(); // img.src='./mao.gif' // img.onload=function(){ // let pattern=context.createPattern(img, 'repeat'); // context.fillStyle=pattern; // context.fillText('hello', 150, 300); // } // 绘制图片 // context.beginPath(); // let img=new Image() // img.src="./tuzi.png" // img.onload=function(){ // 图片，x,y,宽，高， // context.drawImage(img, 10, 20,100,100); // 从图片上扣取某局部放到画布上：图片，图片里的x,图片的y,剪裁的宽度，剪裁的高度，画布的x,画布的y,搁置的宽度，搁置的高度 // context.drawImage(img, 100, 500,100,100,100,500,100,100); // } // 进阶 // 变形 平移：translate，选装：rotate，缩放；scale // 平移 // context.beginPath(); // context.fillStyle='red'; // 状态保留：坐标，色彩 // context.save(); // context.fillRect(0,0,100,100); // context.translate(400, 400); // context.fillRect(0,0,100,100); //复原之前的状态，当然也能够 context.translate(-400 -400); // context.restore(); // context.fillStyle='black'; // context.fillRect(0,0,50,50); // 选装 // context.beginPath(); // context.fillStyle='yellow'; // context.save(); // context.rotate( 30 * Math.PI / 180); // context.fillRect(100,100,40,40); // context.restore(); // context.fillRect(100,100,40,40); // 缩放 // context.beginPath(); // context.fillStyle='blue'; // context.save(); // context.scale(1.5, 2); // context.fillRect(200,200,50,50); // context.restore(); // context.fillRect(200,200,50,50); // transform 线性代数矩阵变换 // a c e // b d f // 0 0 1 // a 程度缩放 1 // b 程度歪斜 0 // c 垂直歪斜 0 // d 垂直缩放 1 // e 程度位移 0 // f 垂直位移 0 // context.beginPath(); // context.save(); // context.transform(1, 0, 0, 1, 100, 200); // context.fillStyle='pink'; // context.fillRect(0,0,100,100); // 合成: 共提供了26中混排模式，用的时候现查就能够了。 // 后绘制的放到上面 destination-over // 后绘制的镂空先绘制的 destination-out // context.globalCompositeOperation='destination-over'; // context.fillStyle='blue'; // context.fillRect(100,100,200,200); // context.fillStyle='red'; // context.fillRect(200,200,200,200 ); // 裁剪 // context.lineWidth='1px'; // context.rect(0, 0, 150, 150); // context.stroke(); // context.clip(); //只在上方的闭合曲线内显示 // context.fillStyle='blue'; // context.font='44px sans-serif'; // context.fillText('hello', 100, 100); </script></body></html>