HTML5 Canvas游戏开发（一）基础知识

　　一、绘制基本图形

　　在每次用canvas画布时，都有几步是“套路”

　　1.在HTML中创建Canvas画布：

<canvas id="mycanvas" width="960px" height="580px">浏览器不支持canvas   <!-- 如果不支持会显示这段文字 -->
</canvas>

　　2.获取画布标签，并得到一个2D对象：

var c = document.getElementById('mycanvas');  //获取标签
var ctx = c.getContext("2d");   //返回一个用来绘制环境类型的环境，返回一个2D对象 ，该对象实现了一个画布使用的大多数方法。

　　1、绘制线条：

ctx.lineWidth = 10;    //设置线条宽度
ctx.strokeStyle = "red";  //设置线条的颜色
ctx.beginPath();    //创建一个新的路径
ctx.moveTo(10,10);      //将画笔光标位置移动到坐标（10,10）处
ctx.lineTo(150,10);    //移动画笔到坐标（150,50）处
ctx.stroke();          //开始绘制定义好的路径

　　通过ctx.lineCap="butt"可以设置线条的形状。有三个可取值：butt、round、square。

　　2、绘制空心矩形：

md5.strokeRect(100,100,200,240);   //绘制空心矩形的函数，四个参数分别表示起点X、Y坐标、矩形长、矩形宽

　　3、绘制实心矩形：

　　方法一：使用fillRext()函数。在绘制实心矩形时，可使用fillStyle设置图形的颜色。

　　方法二：

md5.rect(10,10,70,40);
md5.fill();

　　4、画圆：

　　使用arc()函数可以画一个圆弧。有六个参数：圆弧中心X、Y坐标、圆弧半径、起始角度、终

止角度、是否逆时针。可以调用fill()函数画一个实心圆。

　　5、画圆角矩形：

　　用arcTo函数可以画圆角矩形。有五个参数：P1的X、Y和P2的X、Y、圆弧的半径radius。

　　6、擦除Canvas画板：

　　clearRect()函数。四个参数：X、Y、长度、宽度。

　　7、绘制复杂：二维贝塞尔曲线、三维贝塞尔曲线。

　　8、利用clip()函数可在指定区域绘图。

　　9、绘制自定义图形。

　　二、绘制文本　

　　1、cxt.font：设置字体样式。

ctx.font = "30px Arial";    //设置文字大小和字体样式、字体大小、斜体效果

　　2、cxt.strokeText()：设置文字内容。空心文字！有四个参数：文本字符串，坐标X、坐标Y、文本宽。最后一个参数可以省去，省去时文本宽度自动设定为整个文本的宽度。

ctx.strokeText("Hello World",100,50);   //设置文字内容

　　3、cxt.fillText():设置文字内容。实心文字！参数同strokeText();

　　4、ctx.textAlign=" ";设置文字对齐方式：center、left、right。

　　5、ctx.textBaseline=" "; 设置文字纵向对齐方式：top、middle、bottom、ideographic等。

　　三、图片操作

　　1、利用drawImage()函数绘制图片，该函数有三种原型：

drawImage(image,dx,dy);
drawImage(image,dx,dy,dw,dh);
drawImage(image,sx,sy,sw,sh,dx,dydw,dh);

　　第一参数都是要绘制的对象。

　　绘制图像方法一：

　　在HTML添加如下代码：

<img id="face" src="1.jpg" alt="the face" width="240px" height="240px">

　　JavaScript代码如下：

var img=document.getElementById("face");
image.onload =function(){ctx.drawImage(image,10,10);}

　　绘制图像方法二：

var image = new Image();image.src = "1.jpg";image.onload =function(){ctx.drawImage(image,10,10);ctx.drawImage(image,260,10,100,100);ctx.drawImage(image,50,50,100,100,260,130,100,100);}

　　一定要添加图片的onload事件监听！

　　第一个函数从（10,10）开始绘制整张图片。

　　第二个函数从（260,10）绘制整张图片到长100、宽100的矩形区域内。

　　第三个函数表示截取图片从（50,50）到（100,100）的部分，从坐标（260,130）开始绘制，放到长100、宽100的矩形区域内。

　　2、利用getImageData和putImageData绘制图片。

　　3、利用createImageData新建像素。

转载于:https://www.cnblogs.com/suvllian/p/5451612.html

HTML5 Canvas游戏开发（一）基础知识相关推荐

HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
游戏开发unity基础知识系列：（一）unity 2019 下载与安装
游戏开发unity基础知识系列:(一)unity 2019 下载与安装声明:未经作者允许,严禁商用,转载请标明出处和来源,谢谢零.前言本人在unity2d方面使用较多,关于unity的使用后面预 ...
【HTML5 Canvas游戏开发】笔记(一) 概述和基础讲解
本系列文章由Shin-Knight编写,转载需注明出处. 作者:Shin-Knight 邮箱:shinknight@163.com 文章链接:http://www.cnblogs.com/knight ...
《HTML5 Canvas游戏开发实战》——3.3　自定义画板
3.3 自定义画板前面的章节已经将Canvas的API大致介绍完毕了,下面我们来制作一个自定义画板,进一步熟悉一下这些API的用法. 3.3.1 画板的建立建立一个画板的步骤如下: (1)当鼠标按 ...
HTML5 Canvas游戏开发（二）高级功能
一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移 ...
【Unity3D游戏开发】基础知识之Tags和Layers (三二)
Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...
HTML5 canvas游戏开发实战 7 : 是男人就下一百层“游戏
卷轴游戏是因为游戏的背景看起来像是卷轴在滚动而得名,"是男人就下一百层"即为一款2D卷轴游戏.游戏中玩家的任务是让主角持续下落,其过程中会遇到各种麻烦,或地板消失,或地板消失,或地 ...
游戏开发3D基础知识
概念学习: 向量向量简介我们将所有彼此平行的向量进行平移,使其起点与坐标原点重合,当某一向量的起始端与坐标原点重合,我们成该向量处于标准位置.这样,我们就可用向量的终点坐标来描述一个处于标准位置的 ...

HTML5 Canvas游戏开发（一）基础知识

HTML5 Canvas游戏开发（一）基础知识相关推荐

最新文章

热门文章