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)(代码片段

delphi CANVAS打印是啥

在后面的代码中更改 Canvas.Left 属性?

Unity3d中UGUI组件精简复盘Canvas及其相关组件

canvas杂记

小程序各种功能代码片段整理---持续更新