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

<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绘制图片、绘制有意思的图形组合、图片处理等

未完待续，期待下一节吧？

文章永久地址1：http://www.itjeek.com/blogs/Html5-5-canvas1.html

永久地址2：http://blog.itjeek.com/blogs/Html5-5-canvas1.html

Html5 学习系列（五）Canvas绘图API快速入门（1）的更多相关文章

  1. 引言：Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  2. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  3. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  4. Html5 学习系列（四）文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  5. Html5学习系列

    Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...

  6. scrapy爬虫学习系列五：图片的抓取和下载

    系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备:      http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...

  7. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  8. Node.js API快速入门

    Node.js API 快速入门 一.事件EventEmitter const EventEmitter = require('events'); class MyEmitter extends Ev ...

  9. [易学易懂系列|rustlang语言|零基础|快速入门|（28）|实战5：实现BTC价格转换工具]

    [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...

随机推荐

  1. 【原】JS正则表达式里的控制符

    正则表达式易于使用而又让人费解,乍一看上去,就像是一行行的乱码,但是它的功能确实又不容小觑.今天整理正则时,纠正了自己的一个误解. 先缕一缕: 正则表达式的两种声明方式: 字面量.构造器 (RegEx ...

  2. proc文件系统在内核中的表现

    当Linux内核启动起来之后,我们可以通过proc虚拟文件系统来查看内的中的一些动态信息. 例如:可以 cat  /proc/misc  来查看系统中装载的所有misc类设备 cat  /proc/d ...

  3. jquery移动端日期插件

    不说多的,直接看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. C++ MFC获取软件运行目录 （包含软件名）

    TCHAR *path = new TCHAR[MAX_PATH];   GetModuleFileName(NULL,path,MAX_PATH); AfxMessageBox(path);

  5. web.py+mysql插入中文提示query = query.encode(charset) UnicodeEncodeError: 'latin-1' codec can't encode characters in position 86-100

    对于中文编码的问题,总会出现各种各样恶心的错误,还不知道应该怎么解决,首先,你从最开头就应该关注编码问题,尽量保证所有的编码方式都是一致的 用python+web.py+mysql来写程序,首先要保证 ...

  6. 一步一步写平衡二叉树（AVL树）

    平衡二叉树(Balanced Binary Tree)是二叉查找树的一个进化体,也是第一个引入平衡概念的二叉树.1962年,G.M. Adelson-Velsky 和 E.M. Landis发明了这棵 ...

  7. TCP通讯socket自定义协议的实现

    转发(JAVA):http://blog.csdn.net/u010818425/article/details/53448817 一个简单的自定义通信协议(socket),http://blog.c ...

  8. (六) 一起学 Unix 环境高级编程 (APUE) 之 进程控制

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  9. 简单的python服务器程序

    一个接受telnet输入的服务器端小程序 #!/usr/local/bin/python3.5 #coding:utf-8 import socket host = '' port = 51423 s ...

  10. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...