Canvas画布

具体代码和注释放在下面了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first</title>
    <style>canvas {
        border: aqua 1px solid
    }
        img{
            width: 100px;
            height: 100px;
        }
   </style>
</head>
<body>
<canvas id="canvas" width="500" height="500">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659140&t=392e7c37352ada731e0715da8bcdede3"
         alt=""
         id="scream">
</canvas>
</body>
</html>
<script>
    const canvas = document.getElementById('canvas');
    if (canvas.getContext) {//监测浏览器是否支持canvas
        const ctx = canvas.getContext('2d');
        // ctx.fillStyle='green';
        // ctx.fillRect(10,10,20,20);
        //
        // ctx.fillStyle='rgb(200,0,0,0.5)';
        // ctx.strokeRect(10,100,50,50);
        //
        // ctx.clearRect(20,20,30,30);

        //实心三角
        ctx.beginPath();
        ctx.fillStyle='skyblue'
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 50);
        ctx.lineTo(200,150);
        ctx.fill();//实心三角

        //空心三角
        // ctx.beginPath();
        // ctx.fillbordeStyle = 'yellow'
        // ctx.moveTo(100, 100);
        // ctx.lineTo(200, 50);
        // ctx.lineTo(200, 150);
        // ctx.closePath();
        // ctx.stroke();

        //实心  绘制五角星
        //  ctx.fillStyle='red';
        // // ctx.strokeStyle='red';
        //  ctx.beginPath();
        //  ctx.moveTo(0,75);
        //  ctx.lineTo(75,75);
        //  ctx.lineTo(100,0);
        //  ctx.lineTo(125,75);
        //  ctx.lineTo(200,75);
        //  ctx.lineTo(135,125);
        //  ctx.lineTo(170,200);
        //  ctx.lineTo(100,150);
        //  ctx.lineTo(30,200);
        //  ctx.lineTo(60,125);
        //  ctx.fill();

        //空心  五角星
        // ctx.strokeStyle='red';//边框颜色
        // ctx.beginPath();
        // ctx.moveTo(0,75);
        // ctx.lineTo(75,75);
        // ctx.lineTo(100,0);
        // ctx.lineTo(125,75);
        // ctx.lineTo(200,75);
        // ctx.lineTo(135,125);
        // ctx.lineTo(170,200);
        // ctx.lineTo(100,150);
        // ctx.lineTo(30,200);
        // ctx.lineTo(60,125);
        // //空心
        // ctx.closePath();
        // ctx.stroke();

        //  圆弧arc()   画笑脸
        // ctx.beginPath();
        // ctx.arc(100,100,80,0,Math.PI*2,true);//脸
        // ctx.moveTo(160,100);
        // ctx.arc(100,100,60,0,Math.PI)//口
        // ctx.moveTo(80,80);
        // ctx.arc(70,80,10,0,Math.PI*2);//左眼
        // ctx.moveTo(140,80);
        // ctx.arc(130,80,10,0,Math.PI*2);//右眼
        // ctx.stroke();

        //奥运五环()
        // ctx.lineWidth = 5;//线条宽度
        // ctx.beginPath();
        // ctx.strokeStyle = 'blue';
        // ctx.arc(80, 80, 60, 0, Math.PI * 2);
        // ctx.stroke();
        //
        // ctx.lineWidth = 5;//线条宽度
        // ctx.beginPath();
        // ctx.strokeStyle = 'black';
        // ctx.arc(210, 80, 60, 0, Math.PI * 2);
        // ctx.stroke();
        //
        // ctx.lineWidth = 5;//线条宽度
        // ctx.beginPath();
        // ctx.strokeStyle = 'red';
        // ctx.arc(340, 80, 60, 0, Math.PI * 2);
        // ctx.stroke();
        //
        // ctx.lineWidth = 5;//线条宽度
        // ctx.beginPath();
        // ctx.strokeStyle = 'yellow';
        // ctx.arc(145, 140, 60, 0, Math.PI * 2);
        // ctx.stroke();
        //
        // ctx.lineWidth = 5;//线条宽度
        // ctx.beginPath();
        // ctx.strokeStyle = 'green';
        // ctx.arc(270, 140, 60, 0, Math.PI * 2);
        // ctx.stroke();

        //字体设置
        // ctx.strokeStyle="#FF0000";//颜色
        // ctx.font = "30px Arial";//字体大小，字体
        // ctx.strokeText("Hello World", 10, 50);//字体内容，x轴，y轴

        //Canvas - 渐变
        /*
        createLinearGradient(x,y,x1,y1) - 创建线条渐变
        createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变*/

        // createLinearGradient();
        // 创建渐变
        // const grd=ctx.createLinearGradient(0,0,200,100);
        // grd.addColorStop(0,'red');
        // grd.addColorStop(1,'white');
        // // grd.addColorStop(2,'green');
        // // 填充渐变
        // ctx.fillStyle=grd;
        // ctx.fillRect(10,10,150,100);

        //createRadialGradient():
        // 创建渐变
        // const grds=ctx.createRadialGradient(75,50,5,90,60,100);
        // grds.addColorStop(0,"red");
        // grds.addColorStop(1,"white");
        // // 填充渐变
        // ctx.fillStyle=grds;
        // ctx.fillRect(10,10,150,100);

        //Canvas - 图像
    //     const imgs = document.getElementById('scream');
    //
    //     imgs.onload = function () {
    //         ctx.drawImage(imgs, 10, 10);
    //     }
    }

</script>
<!--绘制路径-->
<!--步骤：-->
<!--1.创建路径起始点-->
<!--2.使用画图命令去画出路径-->
<!--3.路径封闭-->
<!--4.一旦路径生成，就能通过描边或填充路径区域来渲染图形-->
<!--方法：-->
<!--beginPath()-->
<!--新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径，通常使用moveTo设置起始位置-->
<!--closePath()-->
<!--闭合路径，如果绘制的路径自己就是闭合的，就不需要调用这个方法-->
<!--fill()-->
<!--通过填充路径的内容区域生成实心的图形，可以不用closePath-->
<!--stroke()-->
<!--通过线条绘制图形轮廓，需要使用closePath-->
<!--moveTo(x, y)
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
-->
<!--将笔触移动到指定的坐标x以及y上-->
<!--lineTo(x, y)-->
<!--绘制一条从当前位置到指定x以及y位置的直线-->
<!--圆弧：
 arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,y圆心坐标；radius半径；startAngle, endAngle开始和结束弧度；anticlockwise方向，默认不写是顺时针，设置成true为逆时针-->

<!--添加样式和颜色-->
<!--颜色-->
<!--fillStyle =color 设置图形的填充颜色-->
<!--strokeStyle = color 设置图形轮廓的颜色-->
<!--color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象-->

<!--线型样式-->
<!--lineWidth = value 设置线条宽度-->

<!--绘制文字
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
-->

<!--
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
两行代码绘制一个红色的矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
-->

<!--
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线
-->

<!--
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)
-->