HTML5 Canvas，shadowColor& shadowBlur [英] HTML5 Canvas, shadowColor & shadowBlur
问题描述
我的问题是关于在下面的第二（外）矩形使用的shadowBlur特征。 shadowBlur特征适用于此矩形之后的每个形状 。 （如果你注释掉shadowColor和shadowBlur行21& 22，然后取消注释行14和15上的shadowColor和shadowBlur行，你应该看到我的意思。）我的问题是，如何应用shadowBlur到一个特定部分，而不将该特征应用于画布的每个后续部分。在这个例子中，我试图为每个画布和上下文创建单独的变量，但问题仍然存在。
归属：这些示例基于html5canvastutorials.com的示例
<！DOCTYPE html>
< html lang =en
< head>
< script type =text / javascript>
function addRect（）{
var canvas1 = document.getElementById（myCanvas）;
var ctx = canvas1.getContext（2d）;
var canvas3 = document.getElementById（myCanvas）;
var ctx3 = canvas3.getContext（2d）;
ctx.rect（60,60,180,80）;
ctx.fillStyle =green;
//ctx.shadowColor=\"black;
//ctx.shadowBlur = 10;
ctx.fill（）;
ctx3.lineWidth = 3;
ctx3.strokeStyle ='red';
ctx3.shadowColor =black;
ctx3.shadowBlur = 10;
ctx3.strokeRect（45,45,210,110）;
}
function addOval（）{
var canvas2 = document.getElementById（myCanvas）;
var context = canvas2.getContext（2d）;
//定义椭圆的中心
var centerX = 288;
var centerY = 250;
//定义椭圆的大小
var height = 100;
var width = 250;
var controlRectWidth = width * 1.33;
context.beginPath（）;
context.moveTo（centerX，centerY - height / 2）;
//绘制椭圆形的左侧
context.bezierCurveTo（centerX-controlRectWidth / 2，centerY-height / 2，
centerX-controlRectWidth / 2，centerY + height / 2，
centerX，centerY + height / 2）;
//绘制椭圆的右侧
context.bezierCurveTo（centerX + controlRectWidth / 2，centerY + height / 2，
centerX + controlRectWidth / 2，centerY-height / 2 ，
centerX，centerY-height / 2）;
context.fillStyle =red;
context.fill（）;
context.lineWidth = 5;
context.strokeStyle =blue;
context.stroke（）;
context.closePath（）;
}
< / script>
< / head>
< body onload =addRect（）; addOval（）;>
< canvas id =myCanvaswidth =700height =400>
您的浏览器并不支持canvas元素。
< / canvas>
< / body>
< / html>
使用：
ctx.save（）;
ctx.shadowColor =black;
ctx.shadowBlur = 10;
ctx.strokeRect（45,45,210,110）;
ctx.restore（）;
或：
ctx.shadowColor =black;
ctx.shadowBlur = 10
ctx.strokeRect（45,45,210,110）;
ctx.shadowColor = undefined;
ctx.shadowBlur = undefined;
我不确定第二种情况下的未定义 - 要取消/重置值。 / p>
My question is regarding this shadowBlur feature used on the 2nd (outer) rectangle below. The shadowBlur feature is applied to every shape after this rectangle. (If you comment out the shadowColor and shadowBlur lines 21 & 22, and then uncomment the shadowColor and shadowBlur lines on lines 14 & 15, you should see what I mean.) My question is, how do I apply shadowBlur to one specific portion of the Canvas drawing without applying the feature to every succeeding portion of the Canvas. In this example I have tried creating separate variable for each canvas and context, but the problem still persists.
Attribution: These examples are based on examples from html5canvastutorials.com
<!DOCTYPE html>
<html lang="en"
<head>
<script type="text/javascript">
function addRect(){
var canvas1=document.getElementById("myCanvas");
var ctx=canvas1.getContext("2d");
var canvas3=document.getElementById("myCanvas");
var ctx3=canvas3.getContext("2d");
ctx.rect(60,60,180,80);
ctx.fillStyle="green";
//ctx.shadowColor="black";
//ctx.shadowBlur = 10;
ctx.fill();
ctx3.lineWidth = 3;
ctx3.strokeStyle='red';
ctx3.shadowColor="black";
ctx3.shadowBlur = 10;
ctx3.strokeRect(45,45,210,110);
}
function addOval(){
var canvas2=document.getElementById("myCanvas");
var context=canvas2.getContext("2d");
// define center of oval
var centerX = 288;
var centerY = 250;
// define size of oval
var height = 100;
var width = 250;
var controlRectWidth = width * 1.33;
context.beginPath();
context.moveTo(centerX,centerY - height/2);
// draw left side of oval
context.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,
centerX-controlRectWidth/2,centerY+height/2,
centerX,centerY+height/2);
// draw right side of oval
context.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,
centerX+controlRectWidth/2,centerY-height/2,
centerX,centerY-height/2);
context.fillStyle="red";
context.fill();
context.lineWidth=5;
context.strokeStyle="blue";
context.stroke();
context.closePath();
}
</script>
</head>
<body onload="addRect(); addOval();">
<canvas id="myCanvas" width="700" height="400">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
Use either this:
ctx.save();
ctx.shadowColor="black";
ctx.shadowBlur = 10;
ctx.strokeRect(45,45,210,110);
ctx.restore();
Or this:
ctx.shadowColor="black";
ctx.shadowBlur = 10;
ctx.strokeRect(45,45,210,110);
ctx.shadowColor= undefined;
ctx.shadowBlur = undefined;
I am not sure about 'undefined' in second case - something to nullify/reset the value.
这篇关于HTML5 Canvas，shadowColor& shadowBlur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
