JS-canvas 渐变 绘制圆

来源:互联网 发布:淘宝图片分辨率 编辑:程序博客网 时间:2024/05/21 14:03



<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createRadialGradient(50,50,10,50,50,30);grd.addColorStop(0.1,"#fff");grd.addColorStop(1,"#f00");ctx.fillStyle=grd;ctx.strokeStyle = '#fff';ctx.arc(50,50,50,0,2*Math.PI,false);ctx.stroke();ctx.fill();//ctx.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI, false);//ctx.fillRect(10,10,100,100);</script></body></html>


原创粉丝点击