轻松学会JS游戏

编程入门行业动态更新时间:2024-10-28 01:13:03

轻松学会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="" 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新标签

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

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

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

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

canvas标签在IE9以下不支持

canvas可以做什么？

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

画布以左上角为坐标原点（0,0），往右为x轴不断增大，往下为y轴不断增大
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);}