H5 canvas基础入门到捕鱼达人小游戏实现(1)
来源:互联网 发布:跳跃网络ceo吴亚西 编辑:程序博客网 时间:2024/04/29 06:12
为什么学习canvas?
看见别人网页一些非常炫酷的效果,羡慕不已,于是对canvas产生了浓厚的兴趣,所以想仔细学习学习canvas.下面就一起来学习吧,本文为系列文章,最后会编写一个简单版的捕鱼达人小游戏作为结课标准。
小图片走起~
什么是canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建丰富> 的图形引用
好吧既然知道什么是canvas就好办了,我们来创建canvas画布吧
HTML代码
<canvas id="canvas" width="800" height="600" style="border:1px solid #ddd;display: block;margin:0 auto;"></canvas>
这样我们就创建出一块带边框的白色画布了。当然也可以像普通元素一样定义它的样式。
获取画布对象
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(400,400);context.stroke();
看看画出什么来了?
canvas api
context.moveTo(x,y):设置落笔点(x,y画布位置)context.lineTo(x,y):画到哪里context.stroke():描边(未添加样式直接描边就为黑色)
一条黑色的线段还是太单调了,如果希望画一个三角形呢?并且希望边为粉色的呢?
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(200,100);context.lineTo(100,300);context.lineTo(100,100);context.strokeStyle = "pink";context.stroke();
效果:
canvas api
context.lineTo(x,y):画到哪里,可以多次使用context.strokeStyle = "pink";表示描边颜色(还可以使用rgba(),rgb(),#000等几种形式表达)
画到这里我们可能就会想,既然可以描边,那么肯定少不了填充了填充了
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(200,100);context.lineTo(100,300);context.lineTo(100,100);context.fillStyle = "red";context.fill();
看看效果:
canvas api
context.fillStyle = "颜色值" :填充颜色context.fill():填充图形
来看看如何控制一条线条的粗细
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);//设置落笔点context.lineTo(500,100);//画到的位置context.lineWidth = 100; //线条宽度context.stroke(); //描边
想想下,其实就是一条黑色的横线,但是宽度有100px,跟一个黑色的块一样
现在我们再来把线条添加宽度画一个三角形看看效果
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(400,100);context.lineTo(300,300);context.lineTo(100,100);context.lineWidth = 10;context.stroke();
注意图片上的左上角 是不是缺了一个角,这是为什么呢?是不是没有闭合?对就是缺闭合
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(400,100);context.lineTo(300,300);context.lineTo(100,100);context.closePath();//在这里进行闭合试试context.lineWidth = 10;context.stroke();
这样显示就非常完美了!!!
闭合的另外一个小技巧。
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(300,100);context.lineTo(300,200);context.lineTo(100,200);gd.stroke();
看效果:
是的正常就这么画了,那么现在如果想让它闭合的话,估计大家也能猜到,直接添加closePath();
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(300,100);context.lineTo(300,200);context.lineTo(100,200);context.closePath();gd.stroke();
它会自己去选择起始点,并且闭合的。图就不贴了就是一个长方形的描边!
既然说到closePath的话那么想想会不会有beginPath呢,答案是肯定的,它的含义是重新开始路径,譬如,你想在画布中画两条会不干扰的图形的时候,就需要它了
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.beginPath();context.moveTo(200,100);context.lineTo(200,300);context.lineWidth = 20px;context.strokeStyle = 'red';context.stroke();context.beginPath();context.moveTo(300,100);context.lineTo(300,300);context.lineWidth = 20;context.strokeStyle = 'green';context.stroke();
看看图形
大家可以试试把两个beginPath() 都去掉会得到什么样的结果,就能理解它的意思了;
第一节的基础大概就这么多,后面还会很多很多好玩的东西,欢迎大家继续关注,如果文章如有笔误,请评论指正,码字不易。
- H5 canvas基础入门到捕鱼达人小游戏实现(1)
- H5 canvas基础入门到捕鱼达人小游戏实现(2)
- Java小游戏——捕鱼达人
- 捕鱼小游戏
- 【cocos2d-x IOS游戏开发-捕鱼达人7】游戏场景基础实现
- h5+css3 <canvas>实现五子棋
- H5之 Canvas图形实现
- 打鱼机,捕鱼游戏, 捕鱼达人
- Canvas基础7--小游戏练习--解题游戏
- 关于《捕鱼达人》
- 捕鱼达人
- 基于canvas的H5小游戏之一款风格简约跳跃小游戏
- H5基础(5)-HTML5绘图canvas
- Canvas基础入门
- 利用HTML5 <canvas>实现2048小游戏
- html5 canvas 实现简易马祖小游戏
- javascript+canvas实现小游戏-贪吃蛇
- 【IOS】《捕鱼达人》的简单实现(一)
- bzoj4872 [Shoi2017]分手是祝愿 (期望概率DP)
- 读《精通springmvc4》读书笔记
- Qt架构
- Android 和JavaScript 中的java方法加 @JavascriptInterface的原因分析:
- 技术问答整理(3)
- H5 canvas基础入门到捕鱼达人小游戏实现(1)
- Reincarnation
- 复杂性科学
- 11_张孝祥_多线程_线程锁技术
- tar.xz文件的解压和生成
- java使用UDP协议
- 从写项目到部署linux服务器全过程-linux固定IP配置篇
- Qt之配置多个子工程/子模块
- 静态代码块、代码块、构造函数执行顺序