轻松学会JS游戏

svg

SVG是一种可伸缩的矢量图型，它基于XML并用于描述图形的语言；

不同于用像素来描绘的矩阵图像（JPG、PNG、GIF），SVG是和分辨率无关的；

SVG图像可以通过JS和DOM操作来创建和操控；

SVG有自己庞大的语法和较大的复杂度，我们这里只是了解下有这种图像格式

显示svg图的方式

    1.
    <img src="./img/my.svg" alt="">

	2.
	<svg id="Light" xmlns="http://www.w3.org/2000/svg" width="120" height="100" viewBox="0 0 120 100">
        <defs>
            <style>
                .cls-1 {
                    fill: #ccc;
                    fill-rule: evenodd;
                }
            </style>
        </defs>
        <title>Vector Smart Object1</title>
        <path id="iPad_Compare" data-name="iPad Compare" class="cls-1"
            d="M20.737,20H1.27A1.3,1.3,0,0,0,.006,21.256L0,49.8A1.264,1.264,0,0,0,1.27,51H20.737A1.306,1.306,0,0,0,22,49.743V21.256A1.3,1.3,0,0,0,20.737,20Zm-9.793,1.251a0.43,0.43,0,1,1-.432.43A0.432,0.432,0,0,1,10.943,21.251ZM11,50.5a1,1,0,1,1,1-1A1,1,0,0,1,11,50.5ZM20,48H2V23H20V48ZM33.743,11H8.257A1.24,1.24,0,0,0,7,12.25V19H9V15H33V47H23v2.743A1.306,1.306,0,0,1,21.737,51H33.743A1.241,1.241,0,0,0,35,49.75V12.25A1.24,1.24,0,0,0,80.743,11ZM21,13.5a0.5,0.5,0,1,1,.5-0.5A0.5,0.5,0,0,1,21,13.5ZM45.5,3h-31A1.484,1.484,0,0,0,13,4.5V10h2V7H45V47H36v2.75A1.241,1.241,0,0,1,34.743,51H45.5A1.485,1.485,0,0,0,120,49.5V4.5A1.485,1.485,0,0,0,45.5,3ZM30,5.75A0.75,0.95,0,1,1,30.75,5,0.75,0.75,0,0,1,30,5.75Z" />
    </svg>

canvas

  canvas: 画布，H5新标签

1. canvas本身没有任何外观，只是在页面中创建了一个画板。

    canvas可以理解为浏览器运行js代码后绘制出来的一张图片
   

2. canvas标签的宽高要通过canvas属性设置，不要在css里面设置

    原因：canvas可以理解为浏览器运行js代码后绘制出来的一张图片，canvas属性设置的宽高才是这张图片本身的宽高，才是这个图片编码像素的宽高。
    而css里面设置的宽高只是这个图片在渲染树上面的宽高，也就是在浏览器里面显示的宽高。
   

3. canvas标签在IE9以下不支持

4. canvas可以做什么？

    小游戏   webvr   大数据可视化界面（图形的绘制）
   

5. 画布以左上角为坐标原点（0,0），往右为x轴不断增大，往下为y轴不断增大

6. canvas标签提供了一个API：getContext，调用这个API就会返回一个对象，返回的这个对象里面提供了很多API供我们调用，去绘制图形

线段的绘制

  moveTo(x,y)：确定线段的起点。

  lineTo(x,y)：将上面定义的线段起点和指定的新的点连接起来。

  closePath()：会把起点和终点连接起来。

  stroke()：开始绘制图形，当前路径下的所有子路经都会绘制出来。

  beginPath()：开始定义一条新的路径。

 PS：如果要接着绘制新的路径，记得调用beginPath()方法；

        let canvas  = document.getElementById('mycanvas');
        let context = canvas.getContext('2d');

        context.beginPath();// 新开绘制路径
        context.moveTo(10,120);//起点
        context.lineTo(200,120);//终点
        context.strokeStyle = "#f00";//设置线的颜色
        context.lineWidth = 10;
        context.stroke();//绘制

矩形的绘制

 rect(x,y,width,height)
 strokeRect(x,y,width,height)
 fillRect(x,y,width,height)

  四个参数： x,y ：起点坐标
       width：矩形的宽度
      height：矩形的高度

        let canvas  = document.getElementById('mycanvas');
        let context = canvas.getContext('2d');

        // 绘制实心矩形：context.rect(x,y,width,height);
        context.rect(10,120,200,100);
        context.strokeStyle = '#f00';
        context.fillStyle = 'green';//设置填充颜色
        context.fill();//填充
        context.stroke();

        // 绘制空心矩形
        context.strokeRect(10,230,200,100);

        // 绘制实心矩形(不带边框的)
        context.fillRect(10,230,200,100);

弧线的绘制

 arc(x,y,r,startAngle,endAngle,counterclockwise（可选）)

  六个参数：x,y：圆的中心坐标
        r：圆的半径
     sAngle：起始角，以弧度计。（圆三点钟位置是 0 度）。
     eAngle：结束角，以弧度计。
counterclockwise：规定逆时针或顺时针进行绘图。（False =为顺时针，true =为逆时针）

		// js怎么表示角度？
        let deg = Math.PI/180;
		
        // context.arc(200,200,150,0,360*deg);		//画一个圆
        
        context.arc(200,200,150,0,90*deg);			//弧线
        // context.arc(200,200,150,0,90*deg,true);
        context.stroke();

		//画一个红色的扇形

        context.lineTo(200,200);			//线段起点和指定的新的点连接起来
        context.arc(200,200,150,0,90*deg);	//弧线
        context.closePath();				//起点和终点连接起来
        context.fillStyle = "red";			//填充红色
        context.fill();						//填充
        context.stroke();					//绘制

文本的绘制

  illText(文本,x,y)：在画布上绘制被填充的文本

    三个参数： 绘制的内容； 起点x坐标； 起点y坐标

  strokeText()：在画布上绘制文本（无填充）

		context1.fillStyle = "red";			//文本颜色
        context1.fill();
        context1.font = '50px 宋体,微软雅黑';
        context1.fillText("在canvas上面显示文本",40,100);

图片的绘制

drawImage()：将原图片像素的内容复制到画布上
  传三个参数：drawImage(img,x,y)

  传五个参数：drawImage(img,x,y,width,height)

  传九个参数(裁剪图片)：drawImage(img , cutx , cuty , cutwidth , cutheight , x , y , width , height)
      img:    源图片
      cutx：   裁剪的x坐标
      cuty：   裁剪的y坐标
      cutWidth： 裁剪的宽度
      cutHeight： 裁剪的高度
      x：     在canvas上面绘制的x坐标
      y：     在canvas上面绘制的y坐标
      width：   在canvas上面绘制的宽度
      height：   在canvas上面绘制的高度

        let canvas  = document.getElementById('mycanvas');
        let context = canvas.getContext('2d');
        // 获取canvas的宽高
        let W = canvas.width;
        let H = canvas.height;

        // 创建图片
        //第一种创建img标签方式
        //let img = document.createElement("img");
        //img.src = './img/DMMban.png'; 
        
        //第二种创建img标签方式
        let img = new Image();
        img.src = './img/DMMban.png';
        
        img.onload = function(){				//ps: 将图片的绘制放在onload事件内，是为了在页面所有内容加载完后再绘制，（否则会在加载图片的时候绘制图片，页面中无法显示图片）
            context.drawImage(img,0,130,40,65,0,0,40,65);
        }

清除绘制

  clearRect(x,y,width,height)：清空给定矩形内的指定像素
   四个参数：x：要清除的矩形左上角的 x 坐标
        y：要清除的矩形左上角的 y 坐标
      width：要清除的矩形的宽度
      height ：要清除的矩形的高度