canvas基于语法(二）

1.绘制形状

1.矩形

绘制矩形：
    ctx.rect(x,y,width,height);
    ctx.strokerect(x,y,width,height);
    ctx.fillrect(x,y,width,height);
-------------------------------------------------
清除矩形区域：

    ctx.clearRect(x,y,w,h);
-------------------------------------------------
清除画布：
    (一)ctx.clearRect(0,0,cas.width,cas.height);
    
    （二）cas.width=cas.width;
    

2.圆形

    ctx.arc( x, y, radius. startAngle. endAngle, anticlockwise)

描述:

1.该方法用于绘制一段弧, 配合开始点的位置 与 stroke 方法或 fill 方法可以绘制扇形.
2.方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
3.参数 radius 表示圆弧半径, 单位为弧度.
4.参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
5.参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.

3.绘制文本

ctx.fillText(str,x,y);
ctx.strokeText(str,x,y);
-------------------------------
设置文本颜色和字体
ctx.font="30px 黑体"；
ctx.textAlign  水平对齐方式（left,center,right）
ctx.textBaseline 垂直对齐；(top,middle,bottom,alphabetic(基线))

-------------------------------------
//获取字体宽度；
ctx.measureText();

drawImage使用

1.创建图片对象

    document.createElement('img');
简化：
    var img = new Image();
    img.src="图片路径"；
    
    
    

2.确定到要绘制到哪里位置

    var x,y=0;
需要图片加载完成：

    img.onload=function(){
        ctx.drawImage(img,x,y);
    }
----------------------------
方式一，

ctx.drawImage(image,x,y);

方式二
x,y图片放在哪里，规定图片的大小。
ctx.drawImage(image,x,y,w,h);

方式三
    
    ctx.drawImage(image,sx,sy,sw,sh,x,y,w,h);

3.变换的概念

1.ctx.translate();   平移变换
2.ctx.rotate();      旋转变换
3.ctx.scale();       缩放变换