引言：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快速入门的更多相关文章

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

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

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

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

  3. Node.js API快速入门

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

  4. canvas绘图API详解

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

  5. 腾讯位置服务API快速入门

    前言 之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点 快速入门 申请Key https://lbs.qq.com/guides/startup. ...

  6. canvas 绘图api的位置问题

    很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 通常我们会习惯性地在js中通过c ...

  7. openstack api快速入门

    原文:http://my.oschina.net/guol/blog/105430 openstack官方有提供api供开发者使用,可以使用api做一些外围的小工具,用来简化对openstack的管理 ...

  8. Canvas绘图API

    Canvas就是一个画布,可以进行任何的线.图形.填充等一系列的操作. Canvas的Context对象 要使用Canvas来绘制图形必须在页面中添加Canvas的标签 <canvas id=& ...

  9. 瓜娃《guava》api快速入门

    1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection API Guava Basic Utilities IO API C ...

随机推荐

  1. Linux FTP安装与简单配置

    1.检測是否原有启动 ps -ef|grep vsftpd 2.检測是否有安装包 rpm -qa|grep vsftpd 3.假设有输出.查看状态并启动 service vsftp status  - ...

  2. 【Android】项目中每个文件夹的作用

    1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  3. Android应用程序组件Content Provider应用实例

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6950440 文简要介绍了Android应用程序 ...

  4. LDAP实例异常停止日志提示虚拟内存virtual memory不足

    [05/Oct/2014:20:50:37 +0800] - ERROR<5135> - Resource Limit - conn=-1 op=-1 msgId=-1 - Memory ...

  5. HDU 5768 - Lucky7

    题意: 给出x, y, m[1...n], a[1..n].     在[x,y]中寻找 p % 7 = 0 且对任意(1<= i <=n) p % m[i] != a[i] 的数字的个数 ...

  6. Core Java读书笔记之String

    Java里面的String Conceptually, Java Strings are sequences of Unicode characters. Java里面的String都是Unicode ...

  7. Java代理模式——静态代理模式

    一:代理模式 代理模式的作用是:为其他对象提供一种代理以控制这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 二:代理模式设计 ...

  8. golang Date format

    package main import ( "fmt" "time" ) // @link https://golang.org/pkg/time/ func ...

  9. Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法

    本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...

  10. 我用爬虫一天时间“偷了”知乎一百万用户，只为证明PHP是世界上最好的语言

    我用爬虫一天时间“偷了”知乎一百万用户,只为证明PHP是世界上最好的语言 2015-08-06 猿圈 我用爬虫一天时间“偷了”知乎一百万用户 只为证明PHP是世界上最好的语言 看了不少朋友圈里推荐的P ...