canvas画圆又毛边

canvas使用arc()画园有毛边，如图：，只需给其添加width，height即可，直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圆形</title>
</head>
<body><canvas class="can-circle" id="circle"></canvas><script type="text/javascript">function _circle(canvas,angle){var ang1 = 270+angle;var ang = ang1/180 * Math.PI;var ctx = canvas.getContext("2d");//解决毛边canvas.width = 120;canvas.height = 120;//灰色
            ctx.beginPath();ctx.lineWidth = 10;ctx.strokeStyle = '#ccc'; ctx.arc(60,60,50,0,Math.PI*2);ctx.stroke();ctx.beginPath();ctx.lineWidth = 10;ctx.strokeStyle = '#6C0'; ctx.arc(60,60,50,Math.PI*1.5,ang);ctx.stroke();}function fun(id,a){var b = 0;a = Math.round(a*360);var set = setInterval(function(){_circle(id,b);b++;if(b === (a+1)){clearInterval(set);}},0);}fun(document.getElementById("circle"),0.8);document.getElementById("circle").onmouseenter = function(){fun(document.getElementById("circle"),0.8);}</script>
</body>
</html>

运行后：，这样是不是美观了很多？

看上面代码可知，解决毛边的主要两句代码是：

canvas.width = 120;
canvas.height = 120;

此width\height可以任意设置，只是为了美观，不遮盖其他文件即本身现实才都设置为了120px。注意，此处width\height的单位不用添加，默认是px。

posted on 2015-11-19 18:17 安蝶阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/cyj7/p/4978472.html

canvas画圆又毛边相关推荐

去除canvas 画圆的毛边
还是上上篇博客遗留下来的问题,http://blog.csdn.net/yeshennet/article/details/50531007 产品经理坐在我身后,一直在念叨,怎么有毛边怎么有毛边,视觉 ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
canvas画圆清除圆html,javascript,html5_js 用canvas 画圆清除问题？，javascript,html5 - phpStudy...
js 用canvas 画圆清除问题? 我在用js写一个五子棋游戏,利用canvas画棋盘和棋子,为了实现悔棋功能,我用clearRect()清除了原来的棋子,再重新画被清除的部分棋盘,却总是出现了一个 ...
HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; c ...
canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
圆头像微信小程序绘图_微信小程序canvas画圆头像
wxml: wxss: canvas{ width:375px; height:100px } js const headImge = 'https://ss0.bdstatic.com/70cFvH ...

canvas画圆又毛边

canvas画圆又毛边相关推荐

最新文章

热门文章