您的位置：首页 > 其它

游戏制作之canvas

2017-07-14 20:17 225 查看

canvas的使用

基本语句

1.要有canvas标签，同时写个id.宽度和高度要写在canvas里面，不然会有不知名的错误。暂时还不不知道原因。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.game{
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas class="game" id="canvas"></canvas>
<canvas id="canvas1" width="300px" height="300px" style="border: 1px solid red;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var canvas1 = document.getElementById("canvas1");
var d = canvas1.getContext("2d");
c.fillRect(40,20,100,100);
d.fillRect(40,20,100,100);
</script>
</body>
</html>

2.js里面先获得画布

3.得到画笔

4.接下来就可以调用相对应的方法画出自己想画的图形。

<canvas id="canvas" width="700px" height="700px" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

函数的使用

画一条直线：先用moveTo（x,y）方法设置起始点的位置，再用lineTo（x,y）设置终点的位置，最后再用stroke()方法把两点连接起来。

c.moveTo(10,10);   //起始点

c.lineTo(10,70);    //终止点

c.stroke();         //两点连线

画填充的三角形：由于前面已经画了直线这条路径，所以需要先开始新路径即用beginPath()方法，再用moveTo（x,y）方法和lineTo（x,y）方法确定三点的位置，再用closePath()方法闭合，也就是把开始点和最后一个点连接起来，再用fill()方法填充。

c.beginPath();       //开始新的路径

c.moveTo(30,10);    //三个

c.lineTo(30,70);    //点的

c.lineTo(50,70);    //位置

c.closePath();      //闭合路径，即把开始的点和结尾的点连起来

c.fill();           //填充

画一个实心蓝绿色矩形：用fillRect(x,y,width,height)方法画一个有宽高的矩形，fillStyle设置填充属性。

c.fillStyle = "aqua"; //填充属性

c.fillRect(70,10,60,60);    //填充矩形

4.画一个空心矩形：用strokeRect(x,y,width,height)方法画一个空心矩形。

c.strokeRect(150,10,60,60);

5.画一个圆：先开始新路径即用beginPath()方法，再用arc(x,y,radius,startAngle,endAngle,direction)方法画一个圆，再用closePath()方法闭合，再用fill()方法填充。注意：度数是弧度制。

c.beginPath();
c.arc(260,40,30,0,2*Math.PI,true);
c.closePath();
c.fill();

6.画图片：先创建对象，指定要画的图片，再用onload方法等加载后再用drawlmage(img,x,y,width,height)方法画出图片。

var img = new Image(); //创建对象

img.src = “img/a.png”; //指定图片

img.onload = function(){ //onload = function(){}是等图片加载完之后再画，否则不会显示图片

c.drawImage(img,320,10,100,100); //画图片

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 游戏制作

相关文章推荐

新的分享

章节导航