关于canvas:canvas-笔记

3次阅读
共计 5274 个字符，预计需要花费 14 分钟才能阅读完成。
<!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>
正文完