canvas入门基础2

继canvas入门基础1 ^_

圆弧context.arc(x, y, radius, start,end, boolean)

x:圆心的x坐标

y:圆心的y坐标

radius:半径

start:开始角度

end:结束角度

boolean:是否逆时针（true）为逆时针，(false)为顺时针

写个小例子 圆形加载效果

        function d2a(n){
            return n*Math.PI/180;
        }//由于arc方法使用的是弧度制 所以封装一个小方法 把角度转换为弧度
        window.onload= function () {
            var oC=document.querySelector('#c1');
            var context=oC.getContext('2d');
            var x=200;
            var y=200;
            var r=100;
            var d=0;
            var timer=null;
            timer=setInterval(function () {
                context.lineWidth=200;
                context.clearRect(0,0,oC.width,oC.height);
                context.beginPath();
                context.strokeStyle='red';
                context.arc(x,y,r,d2a(0),d2a(d++),false);
                context.stroke();
                if(d>360){
                    clearInterval(timer);
                }
            },16)
        }

效果如下：从0度到360的渐变 过程中和完成后的两种形态

Paste_Image.png Paste_Image.png

绘制文字以及其中的一些方法

填充文字：context.fillText(text,x,y)
绘制文字轮廓 context.strokeText(text,x,y)

text:要绘制的文字

x:文字起点的x坐标轴

y:文字起点的y坐标轴

context.font:设置字体样式

context.textAlign:水平对齐方式

      start、end、right、center

context.textBaseline:垂直对齐方式

      top、hanging、middle、alphabetic、ideographic、bottom

context.measureText(text).width:计算字体长度(px) 注意 没有计算高度height方法

依然要写个小例子 代码如下：

var oC = document.querySelector('#c1');
var context = oC.getContext('2d');

context.fillStyle = 'red';
context.textAlign = 'center'; //水平方向居中
context.textBaseline = 'middle'; //垂直方向居中
context.font = '50px 微软雅黑'; //字体大小为50px 字体为微软雅黑
var text='你好，我是于晓鱼'; //想要呈现的内容
context.fillText(text,oC.width/2,oC.height/2); //填充文字 注意text内容要写在第一个位置
alert(context.measureText(text).width);//计算字体的长度为400px

效果如下：

Paste_Image.png

translate、scale、rotate方法

1、平移context.translate(x,y)

x:坐标原点向x轴方向平移x

y:坐标原点向y轴方向平移y

2、缩放context.scale(x,y)

x:x坐标轴按x比例缩放

y:y坐标轴按y比例缩放

3、旋转context.rotate(angle)

angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）

小例子~

           var oC = document.querySelector('#c1');
            var context = oC.getContext('2d');

            context.save(); //保存了当前context的状态
            context.beginPath();
            context.rotate(d2a(10));
            context.strokeRect(100,100,200,100);
            context.restore();//恢复到刚刚保存的状态,保存恢复只能使用一次
            context.save();
            context.beginPath();
            context.scale(0.5, 0.5);//缩放
            context.rotate(d2a(10));//旋转
            context.translate(300, 100);//平移
            context.strokeRect(400,100,200,100);
            context.restore();

            //实验表明应该移动的是坐标轴
            //实验表明缩放的是坐标轴比例
            //实验表明旋转的是坐标轴
            //注意平移 缩放 旋转 这些参数都是两个 缺一不可

保存和恢复状态

保存：context.save() 调用该方法，会保存当前context的状态、属性
恢复：context.restore() 调用该方法就能恢复到save时候context的状态、属性

canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。
错误效果：

Paste_Image.png

正确效果：

Paste_Image.png

canvas基础，未完待续。。。。 どうぞよろしくおねがいします。