读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

}
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绘图

原文地址:http://www.cnblogs.com/jason-beijing/p/7261362.html


最新回复(0)
/jishuv2G0XNHJTiG250wopzz4sLgStNSOpgTVPUk3rwXpzWc_3D4719341
8 简首页