文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5 -帆布径向梯度形状边缘

问HTML5 -帆布径向梯度形状边缘
EN

Stack Overflow用户

提问于 2016-04-14 17:20:31

回答 1查看 77关注 0票数 0

我的代码：

var $c = $('#myCanvas');
$c.attr('width', $(window).innerWidth());
$c.attr('height', $(window).innerHeight() * 0.99);            
var cidx=0;

function redraw() {
    var ctx = $c.get(0).getContext('2d');
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    var r = Math.min(w,h)/2;
    ctx.clearRect(0,0,w,h);

    ctx.beginPath();
    var grad = ctx.createRadialGradient(w/2,h/2, 0.94*r, w/2, h/2, 1*r);
    grad.addColorStop(1, "transparent");
    grad.addColorStop(0.75, "red");
    ctx.fillStyle=grad;
    ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI));
    ctx.fill();                    
    ctx.restore();
}

我得到了这个结果：

我想得到这个结果：

这里有什么办法使边缘形成圆圈吗？不变：

ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI));

因为我需要展示时钟，比如：

四过去- ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI));
过半- ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 2*(0.5*Math.PI));
四向- ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 3*(0.5*Math.PI));
整整一个小时- ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 4*(0.5*Math.PI));

html5-canvas

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-14 17:51:33

这是给你的开始代码。

它沿着圆周画长方形，给你一些“锯齿”。

它显示更均匀的“锯齿”比你想要的图像，但你可以发挥随机你的宽度，高度和间距的矩形，给它一个较不均匀的结果。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle='red';

var n=65;
var cx=150;
var cy=150;
var r=125;
var w=6;
var h=8;
var sAngle=-Math.PI/2;
var eAngle=0;

ctx.shadowColor='black';
ctx.shadowBlur=8;
ctx.shadowOffsetX=1000;
ctx.beginPath();
ctx.arc(cx-1000,cy,r-3,sAngle,eAngle);
ctx.stroke();
ctx.stroke();
ctx.stroke();
ctx.shadowColor='rgb(0,0,0,0)';

for(var a=sAngle;a<eAngle;a+=Math.PI/n){
    var x=cx+r*Math.cos(a)-w/2;
    var y=cy+r*Math.sin(a)-h/2;
    ctx.fillRect(x,y,w,h);
}

#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36629856

复制

相似问题

问HTML5 -帆布径向梯度形状边缘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 -帆布径向梯度形状边缘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 -帆布径向梯度形状边缘
EN