引言：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 ...
随机推荐
- 【git学习二】git基础之git管理本地项目
1.背景 git基础打算分两部分来说,一部分是对于本地项目的管理,第二部分是对于远程代码仓库的操作. git运行本地项目管理包含对于相关文件的追踪,暂存区的比較分析,提交,撤销等功能. ...
- UVA 246 - 10-20-30 (模拟+STL)
UVA 246 - 10-20-30 题目链接 题意:给52张的扑克堆,先从左往右发7张牌,之后连续不断从左往右发7张牌,假设有牌堆形成了下面3种情况(按顺序推断): 1.头两张+尾一张和为10或20 ...
- ARM9嵌入式学习笔记（2）-Vi使用
ARM9嵌入式学习笔记(2) 实验1-1-3 Vi使用 vi创建文件vi hello.c:vi smb.conf-打开文件smb.conf i键-插入模式:esc键-命令行模式::-底行模式: 底行模 ...
- Sybase配置数据库参数
Sybase配置数据库参数参数配置的两种方法:sp_configure ‘参数名称’,参数值修改参数文件(如:Sybase主机上的 %SYBASE%\servername.cfg) 配置Sybase数 ...
- exchange邮箱的”单点登陆“
在跟exchange集成登陆时,通常有这样的需求,用户需要点击邮件链接的时候直接打开,不再需要输入用户名密码,实现所谓的单点登陆. 通常有两种方式 1.form认证 登陆原理:用js模拟表单登陆 代码 ...
- javascript 命名空间,学习
一. (function(){ var _NS=function(){ } _NS.prototype.alert=function(){ console.log('test'); } window. ...
- 004 range的用法
- sublime text 3 快捷键大全以及配置编译环境（转）
Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期 坚持使用并熟悉这些常用的快捷 ...
- 伪元素”:after” , “:before"
伪元素就是源码html中不存在,而视觉上又存在的元素 简单用法: blockquote:before { content: open-quote; // 其他样式 } // ...
- POJ 2446 Chessboard
要求用占两格的长方形铺满平面上除去指定点 二分图匹配 #include <iostream> #include <cstdio> #include <cstring> ...