js+面向对象+html5+canvas相关笔记（三）

1.绘制图片的API，ctx.drawImage()
◆绘制图像的第一种方式，三参数版本，把图像绘制到指定的坐标：
【img.οnlοad=function(){
//在图片加载完毕后，开始画图片，没有设置图片的宽高，所以超出部分会被隐藏
ctx.drawImage(img,10,10);
}，第一个参数是图片元素对象，第二个参数是位于画布的x轴坐标点，第三个参数是位于画布的y轴坐标点
】
◆绘制图像的第二种方式，五参数版本，把图像绘制到指定的坐标，并指定其大小：
【
img.οnlοad=function(){
//在图片加载完毕后，开始画图片，设置了图片的宽高，但是图片可能会变形
ctx.drawImage(img,10,10,200,200);
}，第一个参数是图片元素对象，第二个参数是位于画布的x轴坐标点，第三个参数是位于画布的y轴坐标点，第四个参数是图片最后显示的宽度，第五个参数是图片最后显示的高度
】
◆绘制图像的第三种方式，九参数版本，把才见到的部分图像绘制到指定的坐标，并指定其大小：【
img.οnlοad=function(){
//在图片加载完毕后，开始画图片，设置了图片的宽高，但是图片可能会变形
ctx.drawImage(img,300,100,200,200,10,10,200,200);
}，第一个参数是图片元素对象，第二个参数是裁剪的x轴坐标起点，第三个参数是裁剪的y轴坐标起点，第四个参数是要裁剪的图片宽度，第五个参数是要裁剪的图片的高度，第六个参数是位于画布的x轴坐标点，第七个参数是位于画布的y轴坐标点，第八个参数是图片最后显示的宽度，第九个参数是图片最后显示的高度
】


2.绘制状态的保存与回滚
◆ctx.save();：把当前的状态（绘制环境的所有属性）copy一份进行保存。
◆ctx.restore();：把最近保存的一次状态作为当前状态
◆保存的状态就是那些颜色值、线的宽度、字体的对齐方式、线的两端是圆是方、线的交点是圆是尖等等一些绘制时的属性信息。
◆支持保存多次，也支持回滚多次
◆原理是，当你是用save方法的时候就会将当前绘制环境保存到一个容器中（数组），当你是restore方法的时候就会将容器中取出最后一个绘制环境（数组的pop方法），然后替换掉当前的绘制环境。


3.绘制变换（类似css3中的transform）
◆平移坐标轴：ctx.translate(x轴平移量,y轴平移量);，之前绘制的图形不会受到影响，只会影响之后的，平移坐标轴之后，按照同样的坐标绘制时，ctx.translate(100,100);ctx.fillRect(10,10,50,50);，实际填充的矩形会是在画布（x:110,y:110）的坐标点上，translate方法设置的平移不是总的变化量，而是基于当前的变化量，所以平移会不断累加，也就是说，如果translate(100,100)了，如果想回到原来的坐标轴，需要使用translate(-100,-100),而不是translate(0,0)，所以这一点和css3中是不同的。
◆旋转坐标轴：ctx.translate(旋转的弧度)，已绘制的图形不会受到影响，旋转也会不断累加的，ctx.rotate(Math.PI/6);表示旋转30度角的弧度，按照顺时针的方向旋转，旋转的中心是坐标轴左上角，css3中的rotate方法只需要传度数即可，这一点和css3中也不相同。
◆缩放坐标轴：ctx.scale(x轴缩放的比值,y轴的缩放比值);已绘制的图形不会受到影响，缩放也会不断的累加，ctx.scale(0.5,0.5);表示宽高各缩小一半，也就是原来坐标轴的四分之一。
◆当你想绘制一个以自己为中心的旋转图形时，需要在绘制的时候使用css中盒子上下左右都居中的原理，记得要配合状态保存和状态回滚来使用，先保存之前的状态，一绘制完旋转的图形就回滚到之前的状态，这样就不会影响之后的绘制了。
◆
◆
◆


4.创建图片对象
◆方式一：var img=new Image();，直接创建一个对象即可，然后使用对象的img.src="xx.png";，就可以加载图片了。
◆方式二：var img=document.createElement("img");，这样也能够创建一个对象，然后使用对象的img.src="xx.png";，就可以加载图片了。
◆使用这种方式创建对象，设src属性后会将图片加载到缓存中来【
    /**
     * 功能：加载多张图片 并使用回调函数返回图片对象集合
     * @param imgUrls {数组||对象,图片路径集合}
     * @param imgLoaded {回调函数||会返回图片对象集合||图片加载完毕后调用的回调函数}
     */
    function loadImage(imgUrls, imgLoaded) {


        // 返回加载完毕的图片对象
        var imgs = {};


        //定义一个图片对象
        var img;


        //定义需要加载的图片数量
        var imgNum = 0;
        //定义已经加载的图片数量
        var imgedNum = 0;


        //遍历需要加载的图片路径集合
        for (var key in imgUrls) {
            //每次遍历都表示需要加载一张图片
            imgNum++;
            //创建一个图片对象
            img = new Image();
            //设置当前对象的onload事件
            img.onload = function () {
                //每次触发图片对象的onload就表示已经加载了一张图片
                imgedNum++;
                //判断需要已经加载的图片是否大于或者等于需要加载的图片数量
                if (imgedNum >= imgNum) {
                    //这么做是利用了遍历的速度比图片加载的速度要快的多的原理
                    //图片加载完毕 就返回这个对象
                    imgLoaded(imgs);
                }
            };
            //给每一个图片对象设置src属性
            img.src = imgUrls[key];
            //把每一个图片对象装到imgs对象中去
            imgs[key] = img;
        }
    }
】。


5.输出基本数据类型的包装类型
◆【
function outThis() {
console.log(this);
}
outThis.apply(1);//Numer
outThis.apply("123");//String
outThis.apply(true);//Boolean
】


6.画布的宽高只要重新赋值了，无论是给画布的宽赋值还是高赋值，都会自动清空画布中所有的内容。

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247770.html