引言：Canvas绘图API快速入门
引言：Canvas绘图API快速入门
在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面，甚至好多学习HTML5的开发者都是冲着Web端的页游去的，那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的？本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器：Canvas绘制API。
一、Canvas是什么？
Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。
二、Canvas重要Context对象
(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。
例如： <canvas id="demoCanvas" width="500" height="500"> <p>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</p> </canvas>
(2) 当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象.
代码：<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
</script>
(3) Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。
注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。
三、Canvas Fisrt Demo：画一个立体透明的矩形
Canvas绘制的总体的步骤
- 创建HTML页面，设置画布标签
- 编写js，获取画布dom对象
- 通过Canvas标签的Dom对象获取上下文
- 设置绘制线样式、颜色
- 绘制矩形，或者填充矩形
Canvas绘制一个矩形和填充一个矩形的Demo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<body> <canvas id="demoCanvas" width="500" height="500"> <p>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</p> </canvas> <!---下面将演示一种绘制矩形的demo---> <script type="text/javascript"> //第一步：获取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步：获取上下文 var context = canvasDom.getContext('2d'); //第三步：指定绘制线样式、颜色 context.strokeStyle = "red"; //第四步：绘制矩形，只有线。内容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script></body> |
最终效果下图：
引言：Canvas绘图API快速入门的更多相关文章
- Html5 学习系列（五）Canvas绘图API快速入门（1）
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Html5 学习系列（五）Canvas绘图API快速入门（2）
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- Node.js API快速入门
Node.js API 快速入门 一.事件EventEmitter const EventEmitter = require('events'); class MyEmitter extends Ev ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- 腾讯位置服务API快速入门
前言 之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点 快速入门 申请Key https://lbs.qq.com/guides/startup. ...
- canvas 绘图api的位置问题
很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 通常我们会习惯性地在js中通过c ...
- openstack api快速入门
原文:http://my.oschina.net/guol/blog/105430 openstack官方有提供api供开发者使用,可以使用api做一些外围的小工具,用来简化对openstack的管理 ...
- Canvas绘图API
Canvas就是一个画布,可以进行任何的线.图形.填充等一系列的操作. Canvas的Context对象 要使用Canvas来绘制图形必须在页面中添加Canvas的标签 <canvas id=& ...
- 瓜娃《guava》api快速入门
1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection API Guava Basic Utilities IO API C ...
随机推荐
- C/C++中经常使用的字符串处理函数和内存字符串函数
一. 字符处理函数 1. 字符处理函数:<ctype.h> int isdigit(int ch) ;//是否为数字,即ch是否是0-9中的字符 int ...
- Jquery ui datepicker 设置日期范围，如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
- Linux 下mysql修改数据库存放目录方法和可能遇到的问题
MySQL版本:5.6.23-enterprise-commercial-advanced ,使用rpm安装linux:Red Hat Enterprise Linux Server release ...
- RMAN数据库恢复之丢失数据文件的恢复
删除某一数据文件:SQL> HOST del D:\app\Administrator\oradata\orcl\USERS01.dbf 启动数据库,提示丢失数据文件4,此时数据库处理MOUNT ...
- HEVC测试序列（百度云网盘分享）
巧妇难为无米之炊,身为一个码农怎能碗里没有米呢?想必很多朋友都碰到下载测试序列的困惑,为了减少麻烦,现提供HEVC所有测试序列的下载,上传到百度云网盘上,方便大家下载.主要的测试序列如下: Test ...
- easyui placeholder 解决方案
最近,再用easyui的时候,发现easyui的input标签不支持h5的placeholder,为了实现这个效果,提供以下解决方案: 1.给input标签设置placeholder. <td& ...
- Linux下重要日志文件及查看方式
http://os.51cto.com/art/201108/282184_all.htm 1.Linux下重要日志文件介绍 /var/log/boot.log 该文件记录了系统在引导过程中发生的 ...
- C#抓取网页内容
学习材料一 <C#抓取网页数据分析> 抓取Web网页数据分析 HttpWebRequest 和 HttpWebResponse 的应用
- SharePoint各版本信息
参考网页http://blogs.msdn.com/b/erica/archive/2013/05/30/sharepoint-server-2010-version-reference.aspx
- Ubuntu安装tftp服务器
一.安装如下软件包: sudo apt-get install xinetd tftpd tftp 二.在/etc/xinetd.d/目录下创建tftp文件,并输入如下内容. 执行命令:sudo vi ...