-
canvas绘图机制 起点moveTo 线条长度lineTo 闭合路径beginPath() closePath()查看全部
-
canvas.width canvas.height canvas.getContext('2d');查看全部
-
stroke 绘制查看全部
-
context.globalAlpha设置全局canvas的透明度，默认为1，即不透明； context.globalAlpha = 0.7;透明度0.7查看全部
-
fillStyle__填充样式（样式是多种多样的）； var linearGrad = context.createLinearGradient(Xstar,Ystar,Xend,Yend);创建线性渐变（起始位置X，Y，结束位置X，Y）； grd.addColorStop(stop,color);stop是（开始填充）位置(0.0~1.0的数值)，color是要填充的颜色；这个.addColorStop()至少要2个； context.fillStyle = linearGrad; Context.fillRect(0,0,800,800);填充的形状，如现在，画布的长宽就是800,800的话，就是填充了整个画布咯查看全部
-
各种函数回顾查看全部
-
图片填充： createPattern( img, repeat-style ); 画布填充： createPattern( canvas, repeat-style ); 视频背景填充： createPattern( vedio, repeat-style );查看全部
-
径向渐变！ canvas 径向渐变： step1： var grd = context.createRadialGradient( x0, y0, r0, x1, y1, r1 ); step2： grd.addColorStop( stop, color );查看全部
-
线性渐变！ fillStyle除了可以设置颜色，还可以设置渐变（线性渐变和径向渐变）。 线性渐变： //两个坐标构成一个线段，即渐变线（用于定义渐变的方向和尺度） step1： var grd = context.createLinearGradient( xstart, ystart, xend, yend ); //渐变线上的关键色（参数stop是一个浮点值，决定关键色的位置；参数color决定关键色的颜色） step2： grd.addColorStop( stop, color );查看全部
-
save() restore() 保存恢复canvas绘图的状态 translate(x,y) 位移操作 raote(deg) 旋转操作 scale(sx,sy) 缩放操作 变换矩阵: |a b c| |d e f| |0 0 1| transform(a,b,c,d,e,f) 设置变换矩阵 setTransform(a,b,c,d,e,f) 清除之前的设置并设置查看全部
-
canvas 变换矩阵 context.transform(a, b, c, d, e, f); /* a:水平缩放(默认值1) b:水平倾斜(默认值0) c:垂直倾斜(默认值0) d:垂直缩放(默认值1) e:水平位移(默认值0) f:垂直位移(默认值0) */ context.transform();可以叠加使用，如果需要重新初始化矩阵变换的值，可以用: context.setTransform(a, b, c, d, e, f); 它会使得之前设置的context.transform()失效，恢复为单位矩阵然后再transform查看全部
-
图形变换函数（） 存在副作用！！查看全部
-
scale( sx, sy )操作具有副作用，表现为不仅对图像的大小进行缩放操作，还对图像的其他数值属性（比如边框的宽度，左上角的坐标等等）进行相应的缩放操作。查看全部
-
save（）- 保存绘图状态 restore（） - 恢复绘图状态 成对出现查看全部
-
线段的属性 lineCap = "butt"( default ) "round" "square"; lineJoin = "miter"( default ) "bevel" "round";查看全部
举报
0/150
提交
取消