读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图
canvas |
具备绘图能力的2D上下文 及文本API
很多浏览器对WebGL的3D上下文支持还不够好
有时候即使浏览器支持,操作系统如果缺缺乏必要的绘图驱动程序,则浏览器即使支持了也没用
|
<canvas>
var drawing = document.getElementById("drawing");
if( drawing.getContext ){
drawing.getContext("2d");
}
|
|
toDataURL |
可以导出在canvas元素上绘制的图像
var src = drawing.toDataURL("image/png");
注意toDataURL是canvas对象的方法,不是上下文对象的方法
|
填充色 描边色 |
var context = drawing.getContext("2d")
context.strokeStyle = "red;
context.fillStyle = "#0000ff";
|
绘制矩形 |
fillRect( x,y,width,height);
strokeRect( x,y,width,height);
clearRect( x,y,width,height);
lineWidth
lineGap butt round square
lineJoin round bevel miter
|
绘制路径 |
beginPath()
arc() 画弧线
arcTo 从上一点开始绘制一条弧线
bezierCurveTo 穿过一个点 ,把两个点用弧线连起来
lineTo(x,y) 绘制直线
moveTo() 移动 不绘线
quadraticCurveTo( cx,cy,x,y ) 从上一点开发绘制一条二次曲线,到x,y为止,并且以cx cy为控制点
rect() 绘制一条矩形线路
closePath
fillStyle fill()
stokeStyle stoke()
clip()
|
isPointInPath | 确定画面上的某一点是否位于路径上 |
绘制文本 |
fillText( str,x ,y ,最大像素宽度 )
strokeText( str, x, y, 最大像素宽度 )
|
font "px Arial"
textAlign start end left right center
textBaseline top hanging middle alphabetic ideographic bottom
|
|
measureText() |
var fontSize = 100
context.font = fontSize + "px Arial";
while( context.measureText("Hello world?").width > 140 ){
fontSize -- ;
context.font = fontSize + "px Arial" ;
}
context.fillText( "hello world!", 10, 10 ) ;
context.fillText("font size is" + fontSize + "px", 10, 50 ) ;
|
绘制变换 |
rotate( angle );
scale( scaleX, saleY ) 缩放图像
translate( x, y ) 更改原点
transform() 修改变换矩阵
setTransform() 先变换矩阵重置为默认状态,然后再调用 transform()
|
绘制变化和恢复 |
save
restore
|
绘制图像 |
var image = document.images[0] ;
context.drawImage( image, x, y, width, height ) ;
还可以
context.drawImage( image, orginalX, originalY, originalWidth, originalHeight, x, y, width, height ) ;
image这个参数也可以传其它canvas
|
阴影 |
只在在绘制前为它们设置适当的值,就能自动产生阴影
var context = drawing.getContext("2d");
context.shadowOffsetX = 5 ;
context.shadowOffsetY = 5 ;
context.shadowBlur = 4 ;
context.shadowColor = "rgba(0,0,0,0.5 ) ;
|
渐变 |
由CanvasGradient实例来演示
var gradient = context.createLinearGradient( 30, 30, 70, 70 );
gradient.addColorStop( 0, "white" ) ;
gradient.addColorStop( 1, "black" ) ;
context.fillStyle = gradient ;
context.fillRect( 30, 30, 50, 50 ) ;
注意要确保坐标匹配
|
createRadialGradient()方法 放射渐变 | |
模式 |
就是重复的图像
pattern = context.createPattern( image, "repeat");
context.fillStyle = pattern ;
context.fillRect ( 10, 10, 150, 150 ) ;
注意 模式与渐变一样,都是从原点开始的,并不是要从某个位置开始绘制重复的图像.
createPattern的第一个元素,也可以是video元素 或另一个canvas元素
|
使用图像数据 |
var imageData = context.getImageData( 10, 5, 50, 50 ) ;
这里返回的对象是ImageData的实例,每个实例对象有三个属性 width height data
data属性是一个数组,保存着图像中每一个像素的数据.
可以修改它,然后回写图像数据
imageData.data = data ;
context.putImageData( imageData, 0, 0 ) ;
用上述方法可以实现灰阶过滤器
|
合成 |
globalAlpha 全局透明度
globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合
这个属性的值是字符串,可能的值如下
source-over 默认值:
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor
|
WebGL |
针对Canvas的3D 上下文
www.learningwebgl.com 有非常棒的教程
|
类型化数组 typed arrays ,类型化数组也是数组.
ArrayBuffer的类型
var buffer = new ArrayBuffer( 20 ) ;// 分配20B
var num = buffer.byteLenght // 10 ;
var view = new DataView( buffer, 可选的字节偏移量,可选的要选择的字节数);
|
|
类型化视图 | 继承自DataView |
WebGL上下文 |
var drawing = document.getElementById("drawing");
var param = {};
param.alpha = tue ;
param.depth = true 16位
param.stencil = // 可能使用8位模板缓冲区 默认值是false
param.antialias //表示将使用默认机制执行抗锯齿操作。默认值是true
param.premultipliedAlpha //值为true, 表示组图缓冲区有预乘Alph
param.preserveDrawingBuffer //值为true, 表示在组图完成后保留绘图缓冲区
if( drawing.getContext ){
var gl = drawing.getContext("experimental-webgl");
if( gl ){
//使用WebGL
}
}
|
WebGL常量 | gl.COLOR_BUFFER_BIT |
方法命名 |
类似
gl.uniform4f() 接收4个浮点数
gl.uniform3i() 接收3个整数
gl.uniform3iv() 接收包含3个整数的数组
|
准备绘图 |
gl.clearColor(0,0,0,1);
gl.clear( gl.COLOR_BUFFER_BIT ) ;
先清理缓冲区,然后再执行其它绘图操作
|
视口与坐标 |
gl.viewport( x, y, width, height );
坐标原点在左下角
|
在视口内部 坐标原点是视口的中心 | |
缓冲区 |
gl.createBuffer();
bindBuffer
bufferData
gl.getError()
|
着色器 | shader 顶点着色器 和 片段着色器 |
编写着色器 | |
编写着色器程序 | |
为着色器传入值 | |
绘图 | 只能绘制点 线 三角 |
纹理 | gl.createTexture() 然后再将一幅图像绑定到该纹理 |
读取像素 |
readPixels()
像素信息是从帧缓冲区读取的
|
支持 |
Firefox4+ chrome Safari 5.1 都实现了WebGL API
但Safari里默认是禁用的
在使用WebGL之前,最好检测其是否得到了机算机驱动的支持,而不只是检测监测特定的浏览器版本。
WebGL是一个正在制定的发展中的规范,函数名 签名 数据类型 都有可能改变
可以说 WebGL目前只适合实验性地学习,不适合真正开发和应用.d
|
读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图的更多相关文章
- 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3
Node类型的变化 访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...
- 读书笔记 - js高级程序设计 - 第五章 引用类型
引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string" 需要实验 访问属性的方法 .号和[] 一般情况下要 ...
- R in action读书笔记(20)第十五章 处理缺失数据的高级方法
处理缺失数据的高级方法 15.1 处理缺失值的步骤 一个完整的处理方法通常包含以下几个步骤: (1) 识别缺失数据: (2) 检查导致数据缺失的原因: (3) 删除包含缺失值的实例或用合理的数值代替( ...
- 读书笔记 - js高级程序设计 - 第十章 DOM
文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...
- 读书笔记 - js高级程序设计 - 第八章 BOM
BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...
- JavaScript高级程序设计学习笔记第十五章--使用Canvas绘图
一.基本用法 1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小.能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图 ...
- 读书笔记 - js高级程序设计 - 第十一章 DOM扩展
对DOM的两个主要的扩展 Selectors API HTML5 Element Traversal 元素遍历规范 querySelector var body = document.query ...
- 读书笔记 - js高级程序设计 - 第七章 函数表达式
闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value 前三个值的默认值都为false ...
随机推荐
- ng -----监听变化($scope.$watch())
需求:项目组件中遇到改变日期触发方法. 困难:日期组件中不涉及释焦功能 解决:在angularjs中用$scope.$watch() 其中name是字符串,是指监听到的具体对象值.
- Day3-K-Can you solve this equation? HDU2199
Now,given the equation 8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y,can you find its solution between 0 and ...
- JDK8中的HashMap源码
背景 很久以前看过源码,但是猛一看总感觉挺难的,很少看下去.当时总感觉是水平不到.工作中也遇到一些想看源码的地方,但是遇到写的复杂些的心里就打退堂鼓了. 最近在接手同事的代码时,有一些很长的pytho ...
- 103、Java中String类之compareTo()方法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- MyBatis-Insert、Delete、Update的注意事项
MyBatis-Insert.Delete.Update的注意事项 插入/更新乱码的解决 出现插入乱码,首先要考虑数据库的编码集是不是UTF-8 如果数据库的编码无误,查看MyBatis的全局配置文件 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vscode修改样式
以修改上方滚动条宽度为例 打开开发者工具 help->toggle developer tool 或者快捷键 ctrl+shift+i 选择滚动条,找到css对应文件 鼠标移上去可以看到路径,类 ...
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
<script> export default { name:'header' // 不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...
- Ubuntu下安装 Mysql
MYSQL在ubuntu16.04下的编译安装mysql-5.6.23.tar.gz 为减少安装过程中因权限带来个各种问题,建议全程用root用户编译安装,步骤如下: 1.安装依赖文件 apt-ge ...
- MySQL 批量更新、删除数据shell脚本
#!/bin/bash. ~/.bash_profilelog=/tmp/update_log_1_$(date +%F).logvstart=1step=100vstop=$((${vstart}+ ...