Html5 Canvas Preliminary Study Notes (8) -Shadow

This article continues to introduce some status values ​​of html5. The drawing context of html5 provides rich effects. This article introduces the effect of shadows. , the shadow has four status value controls, namely shadowBlur, shadowOffsetX, shadowOffsetY and shadowColor. Where shadowBlur is the pixel blur value of the shadow, shadowOffsetX and shadowOffsetY are the shadow The offset value on the x axis and the y axis, shadowColor is the shadow Color value, the default value is that the first three values ​​​​are 0, and the last value is set to transparent black. Just modify two of the values ​​​​to show the shadow effect, as shown in the example below. At the same time, the example below also proves that it is a state value, and you can also use saveSave and restoreEject.

The drawing code is as follows

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

Here we just set the shadow color to red, Since the offset values ​​​​of x and y are not set, the default is this shadow surrounding state, shadowColor is set to completely opaque red. You can also set the transparency through the argb value, but the difference in the corresponding shadows is not big:

Modify to the following code, the effect is as follows:

##The drawing code is as follows:

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.shadowColor = "argb(255,0,0,0.5)";
context.fillRect(200,50,100,100);

Shadow The offset values ​​on the

x axis and the y axis, as the name suggests, are to offset the shadow, respectively at x# The ## axis and the y axis are offset by the corresponding distance. The effect is as follows:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(50,50,100,100);

The shadow is not only suitable for squares, but also for other graphics:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.beginPath();//开始路径
context.arc(100,100,60,Math.PI / 6,Math.PI,true);
context.closePath();
context.fill();//填充
context.beginPath();//开始路径
context.moveTo(200,50);//设置路径，参数为原点
context.lineTo(360,50);//设置路径直到本线段的终点
context.lineTo(360,150);//设置路径直到本线段的终点
context.closePath();//结束路径
context.fill();//正式绘制

The above is the content of Html5 Canvas preliminary study notes (8) - shadow. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!