轻松学会JS游戏"/>
轻松学会JS游戏
目录
- svg
- canvas
- 线段的绘制
- 矩形的绘制
- 弧线的绘制
- 文本的绘制
- 图片的绘制
- 清除绘制
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);}
清除绘制
clearRect(x,y,width,height):清空给定矩形内的指定像素
四个参数:x:要清除的矩形左上角的 x 坐标
y:要清除的矩形左上角的 y 坐标
width:要清除的矩形的宽度
height :要清除的矩形的高度
更多推荐
轻松学会JS游戏
发布评论