canvas相关属性使用

Posted 2020-08-12 cmy1025

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();
};