HTML5 canvas问题
<!DOCTYPEhtml><html><head><title>绘制路径</title><metacharset='utf-8'></head><bodystyle='...
<!DOCTYPE html>
<html>
<head>
<title>绘制路径</title>
<meta charset='utf-8'>
</head>
<body style='text-align:center'>
<canvas width='500' height='400' id='canvas' style='border:1px solid'>
</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
function drawTwoArcs(){
context.beginPath();
context.arc(250,200,150,0,Math.PI*2,false);
context.arc(250,200,100,0,Math.PI*2,true);
context.fill();
context.shadowColor=undefined;//描边的阴影
context.shadowOffsetX=0;
context.shadowOffsetY=0;
context.stroke(); //描边
}
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
context.shadowColor='rgba(0,0,0,0.8)';
context.shadowOffsetX=12;
context.shadowOffsetY=12;
context.shadowBlur=15;
drawTwoArcs();
context.restore();
}
context.fillStyle='rgba(100,140,230,0.5)';
context.strokeStyle='rgba(100,140,230,0.5)';
draw();
</script>
</body>
</html>
怎么把内外园之间那条线去掉，要保留其他地方的描边 哦 展开
<html>
<head>
<title>绘制路径</title>
<meta charset='utf-8'>
</head>
<body style='text-align:center'>
<canvas width='500' height='400' id='canvas' style='border:1px solid'>
</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
function drawTwoArcs(){
context.beginPath();
context.arc(250,200,150,0,Math.PI*2,false);
context.arc(250,200,100,0,Math.PI*2,true);
context.fill();
context.shadowColor=undefined;//描边的阴影
context.shadowOffsetX=0;
context.shadowOffsetY=0;
context.stroke(); //描边
}
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
context.shadowColor='rgba(0,0,0,0.8)';
context.shadowOffsetX=12;
context.shadowOffsetY=12;
context.shadowBlur=15;
drawTwoArcs();
context.restore();
}
context.fillStyle='rgba(100,140,230,0.5)';
context.strokeStyle='rgba(100,140,230,0.5)';
draw();
</script>
</body>
</html>
怎么把内外园之间那条线去掉，要保留其他地方的描边 哦 展开
展开全部
只要drawTwoArcs函数加一句话就行，如下~你直接复制+覆盖就OK~
function drawTwoArcs(){
context.beginPath();
context.arc(250,200,150,0,Math.PI*2,false);
context.moveTo(350,200); // 《《---------就是它啦~~~
context.arc(250,200,100,0,Math.PI*2,true);
context.fill();
context.shadowColor=undefined;//描边的阴影
context.shadowOffsetX=0;
context.shadowOffsetY=0;
context.stroke(); //描边
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
