HTML5 Canvas 中的颜色、样式和阴影的属性和方法

时间：2023-12-04 18:16:32

颜色、样式和阴影的属性与方法
fillStyle                设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle         设置或返回用于笔触的颜色、渐变或模式
shadowColor        设置或返回用于阴影的颜色
shadowBlur        设置或返回用于阴影的模糊级别
shadowOffsetX        设置或返回阴影距形状的水平距离
shadowOffsetY        设置或返回阴影距形状的垂直距离

createLinearGradient(x0,y0,x1,y1)         创建线性渐变（用在画布内容上）
x0         渐变开始点的 x 坐标
y0         渐变开始点的 y 坐标
x1         渐变结束点的 x 坐标
y1         渐变结束点的 y 坐标

createPattern(img,"repeat|repeat-x|repeat-y|no-repeat")                        在指定的方向上重复指定的元素
image         规定要使用的图片、画布或视频元素。
repeat         默认。该模式在水平和垂直方向重复。
repeat-x         该模式只在水平方向重复。
repeat-y         该模式只在垂直方向重复。
no-repeat         该模式只显示一次（不重复）。

createRadialGradient(x0,y0,r0,x1,y1,r1)                创建放射状/环形的渐变（用在画布内容上）
x0         渐变的开始圆的 x 坐标
y0         渐变的开始圆的 y 坐标
r0         开始圆的半径
x1         渐变的结束圆的 x 坐标
y1         渐变的结束圆的 y 坐标
r1         结束圆的半径

addColorStop(stop,color)                        规定渐变对象中的颜色和停止位置
stop         介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color         在结束位置显示的 CSS 颜色值

<canvas id="b" width="500" height="450" style="border:1px solid #000"></canvas>

<img src="data:images/deng.png" id="lamp"/>

<script type="text/javascript">

var a=document.getElementById("b");

var ctx=a.getContext("2d");

ctx.fillStyle="green";                //设置或返回用于填充绘画的颜色、渐变或模式

ctx.shadowColor="#000";                //设置或返回用于阴影的颜色

ctx.shadowBlur=25;                        //设置或返回用于阴影的模糊级别

ctx.shadowOffsetX=10;                //设置或返回阴影距形状的水平距离

ctx.shadowOffsetY=10;                //设置或返回阴影距形状的垂直距离

ctx.fillRect(20,20,150,100);

var grd=ctx.createLinearGradient(200,20,320,20);        //创建线性渐变（用在画布内容上）

grd.addColorStop(0,"green");                                                //规定渐变对象中的颜色和停止位置

grd.addColorStop(0.5,"yellow");

grd.addColorStop(1,"white");

ctx.strokeStyle=grd;

ctx.lineWidth=5;

ctx.strokeRect(200,20,150,100);

var grd=ctx.createRadialGradient(85,190,5,110,200,80);        //创建放射状/环形的渐变（用在画布内容上）

grd.addColorStop(0,"green");                                                        //规定渐变对象中的颜色和停止位置

grd.addColorStop(0.5,"yellow");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(20,150,150,100); 

var img=document.getElementById("lamp")

var pat=ctx.createPattern(img,"repeat");        //在指定的方向上重复指定的元素

ctx.rect(200,150,150,100);

ctx.fillStyle=pat;

ctx.fill();

</script>

HTML5 Canvas 中的颜色、样式和阴影的属性和方法

相关文章