Canvas绘图API快速入门
2015-08-20 16:13
232 查看
引言: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
最终效果下图:
还不赶快动手试一下?
四、Canvas绘制图片、绘制有意思的图形组合、图片处理等
未完待续,期待下一节吧?
文章永久地址1:http://www.itjeek.com/blogs/Html5-5-canvas1.html永久地址2:http://blog.itjeek.com/blogs/Html5-5-canvas1.html
作者:FlyDragon
出处:http://www.cnblogs.com/fly_dragon/
关于作者:专注于微软平台项目架构、管理和企业解决方案。如有问题或建议,请多多赐教!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通malun666@126.com 联系我,非常感谢。
相关文章推荐
- DOM(一)-02-(DOM解析的特点)
- JPA学习笔记(11)——使用二级缓存
- Python的sched模块
- [问题记录]父元素position:relative的深坑
- 编写高质量代码改善C#程序的157个建议——建议99:重写时不应使用子类参数
- 当你输入 nova boot时,client做了什么?
- Android学习JNI,使用C调用JAVA语言
- C#中安全的判断两个实例是否不等(不是同一个)
- Xcode6.4 插件管理之Alcatraz
- Android 加载对话框的实现
- Spring+Quartz定时器
- Nginx 动态 upstreams 实现
- c++ const_cast 前置与后置++
- PPT入门基础知识
- jquery Easyui快速开发总结
- 连接数据库
- 数据结构学习笔记之线性结构--连续存储[数组]
- 部署HDFS
- win10原装正版U盘开箱全记录 内地首发
- 在信雅达的一年