其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结。但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了。我也有这种感觉,在学习的过程中,编写实例,用到了其中很多的属性和方法,但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API,方便以后查阅,也顺便造福一下大家。
另外:附一个之前学习的时候自己跟着教程写的一个小游戏:tinyHeart小游戏
开始之前
假设html代码中有一个canvas标签:
<canvas id="canvas">你的浏览器不支持canvas!</canvas>
如果你的浏览器是IE8及以下,那么很遗憾,上面那段文字会被渲染出来!而且下面的方法也都不能使用了;所以请使用支持canvas的浏览器来使用后面的方法。
//获取canvas容器var can = document.getElementById(‘canvas’);//创建一个画布var ctx = can.getContext(‘2d’);
另外我们可以还可以得到容器的宽和高度
var canWid = can.width; //canvas 的宽度var canHei = can.height; //canvas 的高度
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式