<!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>