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

Posted 2020-09-30 阿里P7之路

读书笔记 - js高级程序设计 - 第十三章 事件

 

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