一、绘制基本图形

  在每次用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新建像素。

HTML5 Canvas游戏开发(一)基础知识的更多相关文章

  1. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  2. HTML5 Canvas游戏开发(三)lufylegend开源库件(上)

    lufylegend可以解决HTML5开发游戏中会遇到的一些问题: 1.各种浏览器对于JavaScript和HTML的解析是不一致的. 2.手机浏览器和PC浏览器的区别. 3.JavaScript并非 ...

  3. Unity游戏开发面试基础知识

    面试第一次知识总结: 一.Unity基本操作 1.unity提供哪几种光源? 点光源.平行光.聚光灯.区域光. 2.物体发生碰撞的必要条件什么? 两个物体必须有碰撞体Collider组件,一个物体上必 ...

  4. 【Unity3D游戏开发】基础知识之Tags和Layers (三二)[转]

    Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...

  5. HTML5 Canvas游戏开发(四)lufylegend开源库件(下)

    一.文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象. 1.文本属性 创建的文本框对象不会自动加入可视化对象列表中.只有手动调用addChild()方法才能使它 ...

  6. HTML5 Canvas游戏开发(二)高级功能

    一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移 ...

  7. 游戏开发3D基础知识

    概念学习: 向量 向量简介 我们将所有彼此平行的向量进行平移,使其起点与坐标原点重合,当某一向量的起始端与坐标原点重合,我们成该向量处于标准位置.这样,我们就可用向量的终点坐标来描述一个处于标准位置的 ...

  8. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  9. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

随机推荐

  1. python学习笔记(六) 函数式编程

    一 函数对象 函数同样可以作为对象复制给一个变量,如下: f = abs; print(f(-10)) f = 'abs'; print(f) def add(a,b,f): return f(a) ...

  2. ls乱码问题解决

    http://note.youdao.com/noteshare?id=c7ff510525b4dadaabb6f6a0a72040cc

  3. 手脱ASPack v2.12

    1.PEID查壳提示为: ASPack 2.12 -> Alexey Solodovnikov 2.载入OD,程序入口点是一个pushad,在他的下一行就可以进行ESP定律,下硬件访问断点然后s ...

  4. 《深入Java虚拟机》笔记

    当运行一个Java程序的同时,也就在运行了一个Java虚拟机实例.Java虚拟机实例通过调用某个初始类的mian()方法来运行一个Java程序运行中Java程序的每一个线程都是一个独立的虚拟机执行引擎 ...

  5. KeyDown,KeyPress和KeyUp详解(转)

    1.按键的类型 Windows窗体将键盘输入标识为由按位Keys枚举表示的虚拟键代码.使用Keys枚举,可以综合一系列按键以生成单个值,这些值与WM_KEYDOWN和WM_SYSKEYDOWNWind ...

  6. 字符串:KMP

    KMP是字符串匹配的经典算法 也是众多字符串基础的重中之重 A. 题意:给T组数据,每组有长度为n和m的母串和模式串.判断模式串是否是母串的子串,如果是输出最先匹配完成的位置,否则输出-1. 做法:直 ...

  7. HDU 2619 完全剩余类 原根

    求有多少$i(<=n-1)$,使 $x^i  \mod n$的值为$[1,n-1]$,其实也就是满足完全剩余类的原根数量.之前好像在二次剩余的讲义PPT里看到这个过. 直接有个定理,如果模k下有 ...

  8. 51nod1773 A国的贸易

    基准时间限制:2 秒 空间限制:524288 KB 分值: 40  A国是一个神奇的国家. 这个国家有 2n 个城市,每个城市都有一个独一无二的编号 ,编号范围为0~2n-1. A国的神奇体现在,他们 ...

  9. placeholder样式设置

    在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

  10. SDUT 3929

    Description 蓝色空间号和万有引力号进入了四维水洼,发现了四维物体--魔戒. 这里我们把飞船和魔戒都抽象为四维空间中的一个点,分别标为 "S" 和 "E&quo ...