红宝书 第15章整理——canvas
来源:互联网 发布:在淘宝卖东西赚钱吗 编辑:程序博客网 时间:2024/06/05 20:50
1、基本用法
使用<canvas>标签,注意这里有个关于canvas画布大小与元素大小的事情,之前有一篇博客说过
步骤:
首先创建<canvas>元素:
<canvas id="draw" width="200" height="200"></canvas>
再获取2D上下文对象:
var draw = document,getElementById("draw");
var context = draw.getContext("2d");
接下来主体就变成了context绘图对象,通过调用它的各种绘制函数进行画图
2、绘制
canvas可以绘制简单的矩形,以及填充颜色,描边,设置透明度,阴影,渐变。
清空区域,绘制直线,弧线,文本。
可以支持简单的变化:rotate旋转,scale缩放等等,注意不是动画!!!
除了自己绘制简单的图案,还支持呈现外部的图片。
在使用外部图片时可以在加载图片之后获取到该图片的data数据,是每一个像素的数据,红绿蓝+透明度。
也可以通过这种像素数据绘制图片,这样可以进行简单的图像处理,例如灰度之类的
3、WebGL(3D)
0 0
- 红宝书 第15章整理——canvas
- 红宝书 第3章 整理——数据类型+函数入门
- 红宝书 第4章整理——变量+内存管理
- 红宝书 第6章整理——创建对象
- 红宝书 第6章整理——继承部分
- 红宝书 第7章整理——函数+闭包
- 红宝书 第8章整理——BOM
- 红宝书 第9章整理——客户端检测
- 红宝书 第10章整理——DOM
- 红宝书 第11章整理——DOM扩展
- 红宝书 第13章整理——事件
- 红宝书 第14章整理——表单
- 红宝书 第17章整理——错误处理
- 红宝书 第18章整理——XML入门
- 红宝书 第18章整理——XML与JS
- 红宝书 第18章整理——XPath
- 红宝书 第10章整理——E4X
- 红宝书 第20章整理——JSON
- 【LeetCode7】【Reverse Integer】java中整形正负表示的一些思考
- Android NDK开发之从环境搭建到Demo级十步流
- 整型提升(integer promotion)
- 磁盘:最容易被忽略的性能洼地
- 解决ScrollView嵌套ListView后,进入页面不从顶部开始
- 红宝书 第15章整理——canvas
- git常用命令整理
- 绘制RecyclerView表格布局的分割线的类
- 模板的全特化与偏特化
- 第七章 7-3 使用键盘模仿鼠标操作
- 我的第一篇博客
- Java设计模式
- Q:使用font-size:0 来去掉元素之间的空隙或错位的方法
- HAUTOJ 1261: 地狱飞龙 自适应辛普森算法