canvas的属性

这篇博客详细介绍了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:创建二次贝塞尔曲线

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值