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

随机推荐

crm使用url打开窗口视图
//URL可寻址元素使您能够包含指向Microsoft Dynamics CRM窗口. 视图. 对话框和其它应用程序中的报告. //这样.您就能够轻松扩展其它应用程序.报表或站点,以便用户无需切换应用 ...
【SSH三大框架】Hibernate基础第一篇：编写第一个Hibernate程序
接下来这几章节学习的是Hibernate,Hibernate的主要作用就是用来和数据库进行连接,简化了JDBC的操作. 首先,我们创建项目,然后把Hibernate的jar包和sqlserver的驱动 ...
数据文件、日志文件、归档文件、控制文件、参数文件及RMAN备份数据库信息查询
一.查看数据库信息:=====================1.数据文件 SQL> SELECT FILE#,STATUS,ENABLED,NAME FROM V$DATAFILE; FILE ...
C++ 实现Trim
一.字符串去空格(没有处理字符串中间的空格) lTrim:除去字符串开头的空格 eg." abc123 " --> "abc123 " ...
(原)前端知识杂烩（css系列）
更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+ ...
React-Native获取文本框的值
要想获取文本框的值,首先我们需要看一下官方文档的解释: 这里的意思是说当文本框的内容改变的时候,文本框的输入的内容就会作为一个参数进行传递.因此我们就可以获取到文本框里面的内容就好了. constru ...
[转]如何正确清理C盘
转自微软的Answers网站. 以下是推荐使用的方法,安全且不会误删有用的系统文件 1.尽量不要在C盘安装应用软件,在软件安装时,一般可以手动指定安装路径,您可以将软件指定安装到其他盘符. 在使用它们 ...
centos添加sudoers
CentOS添加sudoers 1.chmod 740 /etc/sudoers 2. ## Allow root to run any commands anywhere root A ...
AngularJS中如何使用trigger报错$digest already in progress
今天在使用trigger事件碰到问题: 例如我有两个按钮,button1和button2,在button2绑定了ng-click事件,现在想点击button1从而触发button2的ng-click事 ...
YII学习,实现基于数据库的后台登录,用户体系.
上次研究Yii框架写到了要完成用户登陆系统.这次接着上次的写. 参考官方权威指南和参考手册,外加各种博客文章.历尽千辛万苦,数遍天上滴星星.完成了后台用户登录.这里用到了YII框架的 CUserIde ...