首页 > 代码库 > canvas相关属性使用

canvas相关属性使用

2024-08-15 17:55:08   216人阅读

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相关属性使用


联系
我们