canvas相关属性使用
Posted cmy1025
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas相关属性使用相关的知识,希望对你有一定的参考价值。
1.canvas按百分比画圆环
可以使用canvas的arc属性画出圆环,百分比部分换算成弧度即可。
2.canvas的font属性没法单独设置,必须设置两个及以上相关属性。
如果要通过传入的值来改变font属性的参数,可以通过正则匹配表达式,replace方法来实现,
如改变字号:
context.font = "italic 12px/20px arial"; context.font = context.font.replace(/\\d+(\\.\\d+)?(px|pt|em|%)/i,"17px");//替换字体大小 context.font = context.font.replace(/(\\/\\s*)\\d+(\\.\\d+)?(px|pt|em|%)/i,"$1"+"27px");//替换Line高度
3.canvas画椭圆
canvas没有提供直接画椭圆的方法,可以通过scale()的方法,对圆进行压缩,达到画椭圆的目的。
技巧就在先save保存画布状态,然后缩放、调用路径指令,再restore恢复画布状态,再stroke绘制出来。
关键点是先save后缩放,先restore后stroke.
//------------均匀压缩法绘制椭圆-------------------- function EvenCompEllipse(context, x, y, a, b) { context.save(); //选择a、b中的较大者作为arc方法的半径参数 var r = (a > b) ? a : b; var ratioX = a / r; //横轴缩放比率 var ratioY = b / r; //纵轴缩放比率 context.scale(ratioX, ratioY); //进行缩放(均匀压缩) context.beginPath(); //从椭圆的左端点开始逆时针绘制 context.moveTo((x + a) / ratioX, y / ratioY); context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI); context.closePath();
context.restore();
context.stroke(); };
均匀压缩法
这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆,理论上为能够得到标准的椭圆.下面的代码会出现线宽不一致的问题,解决办法看5楼simonleung的评论。
//------------均匀压缩法绘制椭圆-------------------- //其方法是用arc方法绘制圆,结合scale进行 //横轴或纵轴方向缩放(均匀压缩) //这种方法绘制的椭圆的边离长轴端越近越粗,长轴端点的线宽是正常值 //边离短轴越近、椭圆越扁越细,甚至产生间断,这是scale导致的结果 //这种缺点某些时候是优点,比如在表现环的立体效果(行星光环)时 //对于参数a或b为0的情况,这种方法不适用 function EvenCompEllipse(context, x, y, a, b) { context.save(); //选择a、b中的较大者作为arc方法的半径参数 var r = (a > b) ? a : b; var ratioX = a / r; //横轴缩放比率 var ratioY = b / r; //纵轴缩放比率 context.scale(ratioX, ratioY); //进行缩放(均匀压缩) context.beginPath(); //从椭圆的左端点开始逆时针绘制 context.moveTo((x + a) / ratioX, y / ratioY); context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI); context.closePath(); context.stroke(); context.restore(); };
以上是关于canvas相关属性使用的主要内容,如果未能解决你的问题,请参考以下文章
自己定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,"掏粪男孩Gif"顺便再提提onWindowFocusChanged)(代码片段