引言：Canvas绘图API快速入门

美工组2015 2024-10-10 00:26:26 原文

引言：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>

<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 ...

随机推荐

tomcat建立虚拟主机
WEB浏览器与WEBserver建立连接后,除了将请求URL中的资源路径发送给WEBserver外,还会将URL中的主机名部分作为HTTP请求消息的Host头发送给WEBserver.比如,在浏览器地 ...
【求出所有最短路+最小割】【多校第一场】【G题】
题意 A从1要追在N的 B 只能走最短的路问B最少切断多少条路可以让A不能过来问B最多切断多少条路A还是能过来对于1 求出1到N的所有最短路的路径,对其求最小割对于2 求出长度最小的最短路即可 ...
一、MP3文件概述
一.概述 MP3 文件是由帧(frame)构成的,帧是 MP3 文件最小的组成单位.MP3 的全称应为 MPEG1 Layer-3 音频文件,MPEG(Moving Picture Experts G ...
将json的时间格式转换成正常的时间格式
/** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) 可以用 1-2 个占位符 * ...
2014年1月9日 Oracle 内存与结构
Oracle启动时为启动一个实例主要为实例 SVG 数据库文件其它文件 1.Oracle: 内存进程其他文件 1.1 SVG内存(Cache) 1.1.1 共享池(Shared Poo ...
SQL Server中的PWDENCRYPT与PWDCOMPARE函数
前幾天有個客戶的網站出問題(不是我們開發的),請我們幫他看,主要的問題是他們的網站會員在進行查詢密碼時,會員收到信的時候在密碼的欄位竟然會出現 System.Binary[] 字樣.而我進去資料庫中查 ...
java之坑-----List中的重复添加同一对象
java中List的add方法不检查List中是否含有已加入项 java中List的add方法不检查List中是否含有已加入项 java中List的add方法不检查List中是否含有已加入项重要事情 ...
1 起步-Pro Git---VCS比较、git基本原理、git配置
本地版本控制系统集中化的版本控制系统诸如 CVS,Subversion 以及 Perforce 等,都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连到这台服务 ...
FMDB将对象放进数据库［一］
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
python 数据类型之数值型
1.在python在数值的类型大概包括int float complex decimal 1.int 在3.x中它不在有最大值的限制. 2.float它更加连近于C语言中的double 3.compl ...