引言：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 ...
随机推荐
- python中使用mahotas包实现高斯模糊
高斯模糊 import mahotas as mh import numpy as np from matplotlib import pyplot as plt image=mh.imread('i ...
- Qemu之Network Device全虚拟方案三: I/O虚拟化
前面两文主要对前端网络流的数据路径和虚拟网卡的创建进行了说明,这些能够看做是Guest OS网络数据包收发的准备工作,那么网络数据包是怎样在Guest OS中进进出出的呢,本文就是重点讲述Guest ...
- zabbix监控代理zabbix-proxy
新公司监控用的zabbix,其中用到了zabbix-proxy,原先没有尝试弄过,现在先提前安装看看,以便后续使用查阅. Zabbix-proxy 是一个监控代理服务器,它收集监控到的数据,先存放在缓 ...
- Deppon接口开发
一.1) 支持的传输协议 http ,暂时只支持HTTP协议进行通信. (2) 支持的数据传输格式 Json ,所有接口暂只支持json消息格式. (3) 编码格式:UTF-8 交互编码格 ...
- for循环删除集合陷阱
首先看下面的代码: import java.util.LinkedList;import java.util.List; public class DeleteCollection { ...
- JQ 更改li 颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ecshop简单结构
Ecshop包括的文件夹有admin.api.cert.data.images.includes.js. languages.plugins.temp.theme.wap.widget这些文件夹,和根 ...
- Composer的使用
安装 curl -sS https://getcomposer.org/installer | php 你可以使用--install-dir选项将Composer安装到指定的目录,例如: curl - ...
- 博客终于开通了happy
HelloWorld! 在我不懈的申请下,我的博客终于在第4次申请后成功开通了! 作为一个毕业两年的码农,现在才开始想要记录一些东西,似乎有点晚 -_-! 希望多年以后可以在这看到我长长的足迹!
- C# 线程池异步调用
许多应用程序使用多个线程,但这些线程经常在休眠状态中耗费大量的时间来等待事件发生.其他线程可能进入休眠状态,并且仅定期被唤醒以轮询更改或更新状态信息,然后再次进入休眠状态.为了简化对这些线程的管理,. ...