H5 canvas基础入门到捕鱼达人小游戏实现(1)
为什么学习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基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
- 基于c语言Easyx库的捕鱼达人小游戏
基于c语言Easyx库的捕鱼达人小游戏(一) 文章目录 基于c语言Easyx库的捕鱼达人小游戏(一) 主菜单 游戏实现 捕鱼计分 下一阶段 主菜单 (写在前面的话:使用EASY-X库一定要命名为.cp ...
- 捕鱼达人小游戏——Java实现
一.捕鱼达人小游戏,界面如下图: 二.有需要的代码自取: 链接:https://pan.baidu.com/s/1s5G2DwfSMlHoE4STanjKyw 提取码:evbg
- html实现经典捕鱼达人小游戏
文章目录 1.设计来源 1.1 游戏界面 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_4315 ...
- 基于java8的捕鱼达人小游戏
整体框架 #mermaid-svg-kwIdYePfSf2yisnx .label{font-family:'trebuchet ms', verdana, arial;font-family:var ...
- Unity-3D捕鱼达人小游戏开发 —— 起因和开始的设置以及准备工作
起因 假期里的软件实践课,使用Unity-3D写一个游戏,试想也不能太low,但是奈何素材和资源太难找,在论坛上逛到了捕鱼达人的素材,便来试一试 开始 素材毕竟是从网上扒的,我觉得也不好放出来,存在网 ...
- java多线程捕鱼达人小游戏
1.创建弹窗,并设置窗口属性. 2.创建Pool类,继承JPanel类,并重写paint方法. 3.创建Net类, 4.创建Fish类,继承Thread类,重写run方法. 5.刚开始先画一条鱼,一个 ...
- Unity-3D捕鱼达人小游戏开发 —— 开始场景
创建Image 对创建的Canvas进行设置 对Image进行属性修改 按住 option (mac) 或者 alt (win),会发生变化,选择了右下角的那个 拖入背景图 创建LogoImage 在 ...
- Unity-3D捕鱼达人小游戏开发 —— 游戏中场景
复制场景 可以沿用start的场景,删除Logo和按钮即可 通过command+D复制start修改名字 添加水波纹 创建一个3D的plane 先将plane清零,取出碰撞体,坐标不是固定的,由实际情 ...
最新文章
- Android深度探索(卷1)HAL与驱动开发第五章总结
- python工程师-如何面试Python后端工程师?
- java xml文件内容替换_java读取xml文件并转换成对象,并进行修改
- 利用python 提取log 文件里的关键句子,并进行统计分析
- zk宕机掉与客户端连接过程记录
- Linux文件目录及其作用
- 微信朋友圈也可以发语音你们造吗?
- leetcode1103. 分糖果 II 该模拟就模拟,别老想着优化
- Android近场通信---NFC基础(一)
- 敏捷开发系列学习总结(13)——Spotify敏捷模式详解三部曲第一篇:研发团队
- jsp ---- JSTL
- 数据解析1:XML解析(1)
- mysql发生系统错误5_[玩转MySQL之一]MySQL体系架构简介
- C语言数据结构、十字链表的分析及实现
- 激光雷达RPLIDAR A1使用教程
- Not registered via @EnableConfigurationProperties, marked as Spring component, or scanned via @Confi
- 修复WiFi网卡驱动异常导致WiFi图标消失报错代码(56)
- EasyExcel动态导出-动态头
- 【车载以太网】【测试】架构及测试工具
- Python滚动条如果滚不动