mantou_riji的博客

效果：悬浮效果： : 将画布信息转换成url， 可以通过url进行图片信息的访问。：eg：点击之后会将图片以w3logo为名称进行下载。效果图：

获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255。// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值。（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。ImageData 对象左上角的 x 坐标，以像素计。水平值（x），以像素计，在画布上显示图像的位置。竖直值（y），以像素计，在画布上显示图像的位置。

/ 获取画笔(这里是2d画笔)

"../QQ截图20230117100435.png"裁剪的作用是遮罩，用来隐藏不需要的部分。// 获取画笔(这里是2d画笔)

保留了底层的亮度（luma），同时采用了顶层的色调 (hue) 和色度 (chroma)。保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）。multiply 和 screen 的结合，原本暗的地方更暗，原本亮的地方更亮。保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）。现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。

/ (1,0)旋转45度后再原坐标的位置是（1/sqrt(2),1/sqrt(2)）// 顺时针旋转45度(旋转后的图像在原坐标的位置来确定前四个参数的大小)eg：旋转45度，并且x轴移动100像素，y轴移动100像素。// 水平移动100像素，竖直移动100像素。: x:水平移动距离；：x水平放大倍数，y垂直放大倍数。b：竖直方向的斜偏移量。c：水平方向的斜偏移量。

x1,y1: 内容的起点；w:内容所占据的最大宽度，超出该宽度会进行压缩。：和fillText的参数一样。// 预测量文本宽度。

/ 第三种绘制图片的方式：裁剪图片 ctx.drawImage(img,x1,y1,x2,y2,x3,y3,x4,y4) img是图片信息，x1,y1是裁剪图片的起点， x2,y2是裁剪图片的宽度和高度，x3,y3是画布的起点，x4,y4是在画布是那个渲染的宽高。// 第二种绘制图片的方式：ctx.drawImage(img,x1,y1,x2,y2) img是图片信息，x1,y1是图片绘制的起点， x2,y2是图片绘制的终点。视频度绘制本质上还是一张张图片的绘制，所以视频绘制仍然使用的是。

x1,y1,r1表示以(x1,y1)为坐标r1为半径的圆，x2,y2,r2表示以(x2,y3)为坐标r2为半径的圆。// x1,y1,r1表示以(x1,y1)为坐标r1为半径的园，x2,y2,r2表示以(x2,y3)为坐标r2为半径的原。// createLinearGradient(x1,y1,x2,y2)， x1\y1渐变的起点，x2\y2渐变的终点。// createConeGradient(r,x1,y1):r：开始渐变的角度，x1，y1渐变旋转的圆心。// 获取画笔(这里是2d画笔)

原因：因为绘制好空心长方形之后没有 ”抬笔“ ，就会认为空心长方形和后面绘制的长方形是一个图案，填充的时候就会一起填充。canvas最重要的就是画笔，可以通过画笔上的属性和方法绘制出不同样式的各种图形。，使用path2D创造出路径之后，直接在路径上进行画画。canvas就是一个画板，可以使用canvas在页面上画出想要的图形。fill的原理：取画笔的起点和终点进行连接，形成闭合图形再进行填充。绘制原理：三点一半径进行圆弧绘制。canvas是一个画板，我们可以在画板上绘制。就可以进行图像的绘制。