学习总结

HTML特性（canvas）01

canvas是一个可以用脚本（JavaScript）再其中绘制图形的html元素，是html5中新曾元素.
注意：canvas不支持再IE9一下的浏览器执行

初步使用canvas

//获取canvas元素
var canvas=document.querySelector('canvas');
        // 获取canvas画笔,必须声明为2d，不然会报错
var ctx=canvas.getContext('2d');

canvas的标签默认尺寸是300*150
注意：如果要使用style设置宽高，相当于把画布进行缩放，可能会使内容模糊
canvas设置宽高的方法
1.直接在标签里使用width：600；height：300
2.在脚本里修改canvas.width/height.

canvas基本的图形绘制

矩形（唯一一个可以直接绘制的图形）

// 1.绘制一个填充的矩形
    ctx.fillRect(x,y,width,height)
// 2.绘制一个描边的矩形
    ctx.strokeRect(x,y,width,height)
// 3.清除出一个矩形区域
    ctx.clearRect(x,y,width,height)

定义路径（线条）

ctx.beginPath();// 定义路径起始点（必须要有）
ctx.rect(50,50,100,100)// 这只是路径，并没有规定描边或者填充
ctx.fill()//填充
ctx.stroke()//描边
ctx.closePath();// 定义路径闭合点（必须要有）

(1)绘制路线

ctx.beginPath();
        ctx.moveTo(50,50);// 点开始的地方
        ctx.lineTo(150,50);
        ctx.lineTo(100,100);
        ctx.lineTo(50,50);
        ctx.stroke()
        ctx.closePath();
//这是一个三角形，主要是线条，也可以在画到第二条线的时候使用填充或者描边 

注意：绘制的线条会出现跨屏，颜色变浅，占两像素
解决办法：moveTo(50,50.5) ;lineTo(150,50.5)

(2)绘制圆&圆弧

ctx.beginPath();
ctx.arc(100,100,50,0,math.PI*2,true)
ctx.closePath();
ctx.arc(x,y,半径，起始弧度（方向），整个圆，绘制方向)
绘制方向：true是逆时针，false是顺时针

(3)绘制文字（canvas处理文本的能力很弱）

        ctx.beginPath();
        ctx.fillText('hello world',x,y);
        ctx.strokeText();
        ctx.font='italic 50px blod Arial';//注意顺序 
                //斜体 大小 粗细 字体
        ctx.textAlign="center";
            start
                默认，文本在指定位置开始
            end
                文本在指定位置结束
            left
                文本左对齐
            right
                文本右对齐
            center
                文本的中心被放置在指定的位置
                
        ctx.textBaseline="top"
            alphabetic
                默认，文本基线是普通的字母基线
            top
                文本基线是em方框的顶端
            middle
                文本基线是em方框的正中
            ideographic
                文本基线是表意基线
            bottom
                文本基线是em方框的底部
            hanging
                文本基线是悬挂基线
        ctx.measureText(text).width;
            text：要测量的文本
        ctx.closePath();

(4)从原始画布剪切任意形状和尺寸的区域
ctx.clip()

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeStyle="#f00";
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
    注意：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）

(5)绘制图片

// 1,绘制图片默认大小:如果超出画布,就不是显示超出部分,
        let img=new Imge();
        img.src="路径";
        img.onload=function(){
            ctx.drawImage(img,x,y);
        }
        //2,绘制图片并设置大小
        let img=new Imge();
        img.src="路径";
        img.onload=function(){
            ctx.drawImage(img,x,y,width,height);
        }
        //3,图片切片后绘制：剪切图片绘制
        let img=new Imge();
        img.src="路径";
        img.onload=function(){
            ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dy);
            //s-源图像，d-绘制画布
        }

(6)视频就是图片的一帧一帧

canvas内容样式设置

1,颜色

ctx.fillStyle='red'/'rgba(0,0,0,.5)'/'#00f';
ctx.fillRect(100,100,100,100)//黑色
//描边也一样

2，透明度

ctx.globalAlpha=.2;

3,线型设置

// 线性设置
        ctx.lineWidth=10;//线宽
        // 两端样式
        ctx.lineCap='square'//方形:会增加线宽
        ctx.lineCap='butt'//默认值
        ctx.lineCap='round'//圆形
        // 两线 拼接
        ctx.lineJoin='miter'/'round'/'bevel'

4，渐变

let lineGradient=ctx.createLinearGradient(100,100,300,300);
        linearGradient.addColorStop(0,'red');
        linearGradient.addColorStop(0.5,'blue');
        linearGradient.addColorStop(1,'pink');

5,阴影

ctx.fillStyle='blue';
        ctx.shadowOffsetX=10;
        ctx.shadowOffsetY=20;
        ctx.shadowBlur=100;//模糊程度
        ctx.shadowColor='red';
        ctx.fillRect(50,50,200,200)
        // 注意样式要在图形之前设置

canvas变换（坐标系的变换）

ctx.translate(x,y);//平移 :平移的是坐标系
        ctx.rotate(angle);//(n*Math.PI/180)
        ctx.scale(x,y);
        // 注意原有的内容不会受影响

保存与恢复

ctx.fillRect(0,0,100,100);
        ctx.save();//保存原来坐标系
        ctx.translate(100,100);
        ctx.fillStyle='#5ACBFF';
        ctx.fillRect(0,0,100,100);
        ctx.restore();//恢复坐标系
        ctx.fillRect(100,0,50,50);

学习心得

今天学习了html5，也离校招会越来越近了，希望自己加吧。