使用H5 canvas画一个坦克
<canvas id="floor" width="800px" height="500px"></canvas>
#floor {
background:#000;
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
}

var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.strokeStyle = '#fff';
cxt.stroke();
结果如下:
第一步,var myCanvas = document.getElementById('floor'); 这个大家应该都明白,拿到canvas元素,拿到canvas元素是因为第二步里需要使用到它。
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.lineTo(200,200);
cxt.closePath();
cxt.strokeStyle = '#fff';
cxt.stroke();
结果如下:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.lineTo(200,200);
cxt.closePath();
cxt.fillStyle = '#fff';
cxt.fill();
结果便是:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.strokeStyle = "#fff";
cxt.strokeRect(20,20,50,100);
cxt.fillStyle = "#fff";
cxt.fillRect(80,20,50,100);
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "orange";
//第一个半圆
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI,true);
cxt.closePath();
cxt.fill();
//圆
cxt.beginPath();
cxt.arc(210,100,50,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//第二个半圆
cxt.strokeStyle = "red";
cxt.beginPath();
cxt.arc(320,100,50,0,Math.PI,false);
cxt.closePath();
cxt.stroke();
结果如下:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#F21C9D";
cxt.font = "50px simhei";
cxt.fillText("圣诞快乐!",30,100);
结果:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
var myImg = new Image();
myImg.src = "images/soldier.png";
myImg.onload = function(){
cxt.drawImage(myImg,60,20,680,454);
};
结果如下:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#542174";
cxt.fillRect(350,400,20,65); //坦克左边的履带
cxt.fillRect(420,400,20,65); //右边的履带
cxt.fillRect(373,410,44,50); //中间的主体
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(395,435,16,0,2*Math.PI,false); //主体上的圆盖
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(395,435); //炮筒起点
cxt.lineTo(395,375); //炮筒终点
cxt.stroke(); //画炮筒

使用H5 canvas画一个坦克的更多相关文章
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- 用canvas画一个的小画板(PC端移动端都能用)
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
- 利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 手对手的教你用canvas画一个简单的海报
啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...
- 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...
- canvas画一个时钟
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- Hive JOIN使用详解
转自http://shiyanjun.cn/archives/588.html Hive是基于Hadoop平台的,它提供了类似SQL一样的查询语言HQL.有了Hive,如果使用过SQL语言,并且不理解 ...
- Floyd算法并输出路径
hdu1224 Free DIY Tour Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- Feature Tools 简介
FeatureTools是2017年9月上线的github项目,是一个自动生成特征的工具,应用于关系型数据. github链接:https://github.com/Featuretools/feat ...
- Session的存储原理
一.session是怎么存储,提取的? 1.在服务器端有一个session池,用来存储每个用户提交session中的数据,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与W ...
- HDU 1104 Remainder(BFS 同余定理)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1104 在做这道题目一定要对同余定理有足够的了解,所以对这道题目对同余定理进行总结 首先要明白计算机里的 ...
- Java web项目配置相关
引申 XML 命名空间(XML Namespaces) XML Schema 教程 XSD(XML Schema Definition) XML Schema 语言也称作 XML Schema 定义. ...
- With all Java versions it is strongly recommended to not use experimental -XX JVM options.
https://lucene.apache.org/solr/7_6_0//SYSTEM_REQUIREMENTS.html System Requirements Apache Solr runs ...
- 小米范工具系列之二:小米范 web目录扫描器
最新版本1.1,下载地址:http://pan.baidu.com/s/1c1NDSVe 文件名scandir,请使用java1.8运行 小米范web目录扫描器主要功能是探测web可能存在的目录及文 ...
- 【Loadrunner】如何通过loadrunner利用代理对手机端Web浏览器及APP进行录制?
以下为作者操作并最终可以成功录制脚本并调试成功的方法实际操作中记录截图,都是干货哦~ 1.安装lr11补丁 百度网盘下载链接:https://pan.baidu.com/s/1TPoaAMYvi1cw ...
- 【Loadrunner】通过loadrunner录制时候有事件但是白页无法出来登录页怎么办?
loadrunner录制脚本时候有事件但是一直白页怎么办? 解决办法:依次进行下方1.2.方法操作,如果还不行再进行3的操作. 1.勾选下图IE浏览器的Internet选项中“启用第三方浏览器拓展*” ...