canvas的属性

最新推荐文章于 2025-04-29 11:11:49 发布

*初级小白*~

最新推荐文章于 2025-04-29 11:11:49 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/123369935

canvas 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了HTML5 Canvas的一些关键属性，如fillStyle、strokeStyle用于设置填充和描边样式，以及shadow系列属性创建阴影效果。此外，还讲解了创建渐变和图案的方法，如createLinearGradient和createPattern，并提到了路径操作如beginPath、moveTo和lineTo等，这些是进行复杂图形绘制的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
let c=document.getElementById('myCanvas')
let ctx=c.getContext('2d')

fillStyle：设置或返回用于填充绘画的颜色、渐变或模式

ctx.fillStyle="#0000ff";

fillRect：绘制“被填充”的矩形

//context.fillRect(x,y,width,height);
//x：矩形左上角的x坐标，y：矩形左上角的y坐标，width：矩形宽度，height：矩形高度
ctx.fillRect(20,20,150,100);

strokeStyle：设置或返回笔触的颜色、渐变或模式

ctx.strokeStyle="#0000ff";

strokeRect：绘制矩形（无填充）

//context.fillRect(x,y,width,height);
//x：矩形左上角的x坐标，y：矩形左上角的y坐标，width：矩形宽度，height：矩形高度
ctx.strokeRect(20,20,150,100);

shadowColor：设置或返回用于阴影的颜色

ctx.shadowColor="black";

shadowBlur：设置或返回用于阴影的模糊级别

ctx.shadowBlur=20;

shadowOffsetX：设置或返回阴影距形状的水平距离

//shadowOffsetX 属性设置或返回形状与阴影的水平距离。
//shadowOffsetX=0 指示阴影位于形状的正下方。
//shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
//shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
ctx.shadowOffsetX=20;

shadowOffsetY：设置或返回阴影距形状的垂直距离

ctx.shadowOffsetY=20;

createLinearGradient：创建线性渐变（用在画布内容上）

//context.createLinearGradient(x0,y0,x1,y1);
//x0,渐变开始的x坐标，y0,渐变开始的y坐标，x1,渐变结束点的x坐标，y1，渐变结束点的y坐标
var grd=ctx.createLinearGradient(0,0,170,0);

createPattern：在指定的方向内重复指定的元素。
createLinearGradient：创建放射状/圆形渐变对象
addColorStop：规定 gradient 对象中的颜色和停止位置
lineCap：设置或返回线条的结束端点样式
lineJoin：设置或返回两条线相交时，所创建的拐角类型
lineWidth：设置或返回当前的线条宽度
miterLimit：设置或返回最大的斜接长度
rect：创建矩形
clearRect：在给定的矩形内清除指定的像素
fill：填充当前绘图（路径）
stroke：绘制已定义的路径
beginPath：起始一条路径，或重置当前路径
moveTo：把路径移动到画布中的指定点，不创建线条
closePath：创建从当前点回到起始点的路径
lineTo：添加一个新点，然后在画布中创建
clip：从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo：创建二次贝塞尔曲线