使用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 ...
随机推荐
- JavaScript获取地址栏的参数!
第一种方式:手动解析 “location”对象 console.log(window.location); 使用这个对象做跳转: window.location.href=""; ...
- maven学习(一)(转)
我记得在搞懂maven之前看了几次重复的maven的教学视频.不知道是自己悟性太低还是怎么滴,就是搞不清楚,现在弄清楚了,基本上入门了.写该篇博文,就是为了帮助那些和我一样对于maven迷迷糊糊的人. ...
- Visual Studio实用小技巧
有一个有关微软Office的笑话,说的是它的特性太多: 当你觉得自己发现了一个Office的新特性时,它已经存在很多年了. 本文将介绍一些在Visual Studio(免费下载)中很实用却被忽略的小技 ...
- chinese-typesetting:更好的中文文案排版
欢迎指正.GitHub 地址:https://github.com/jxlwqq/chinese-typesetting 更好的中文文案排版 统一中文文案.排版的相关用法,降低团队成员之间的沟通成本, ...
- Java中的文件和流相关知识
1. File File类可以使用文件路径字符串来创建File实例,该文件路径可以是绝对路径或相对路径 File类的list()方法中可以接收一个FilenameFilter参数,通过该参数可以只列出 ...
- Python默认调用路径
记录个遇到的小问题,防止下次遇到忘记怎么解. 起因:pip安装扩展库时提示安装完成,但是在Python 终端下无法import 现象:终端直接运行python 时提示如下:(2.7.13)然而用/us ...
- django的framework优化
1.优化framework的性能,解决restapi调用慢的问题 ①预加载,关联查询时做缓存,序列化前简单调用setup_eager_loading ,这个需要确定sql查询调用情况(根据数据库结构确 ...
- 对django框架架构和request/response处理流程的分析
一. 处理过程的核心概念 如下图所示django的总览图,整体上把握以下django的组成: 核心在于中间件middleware,django所有的请求.返回都由中间件来完成. 中间件,就是处理HTT ...
- android进入页面会定位到ListView问题解决方法
在我们的页面中如果存在有ListView,当我们进入这个activity时,页面会定位到ListView的位置去,而不是activity的头部,这是由于ListView会去默认获取焦点所造成的. 解决 ...
- IIS7.5站点配置
1. 创建站点映射目录: c:\website\release 2. 创建系统用户: a.本地用户和组-->用户-->新用户-->用户名\密码:WebUSR.xxxyyy--> ...