-
fllStyle=gradient查看全部
-
fillStyle小结查看全部
-
<canvas id="canvas" ></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); var img=new Image(); img.src="img/2.jpg"; img.onload=function(){ var pattern=context.createPattern(img,"repeat"); context.fillStyle=pattern; context.fillRect(0,0,400,400) } } </script>查看全部
-
createPattern 在指定的方向上重复指定的元素 createPattern (img,repeat-style)查看全部
-
渐变<br> var grd=context.createLinerGradient(xstart,ystart,xend,yend)<br> grad.addColorStop(stop,color)<br> 例子grad.addColorStop(0.0,#fff);0.0必须是浮点数查看全部
-
fillStyle查看全部
-
设置变化 setTransform忽略掉之前的矩阵查看全部
-
变换矩阵查看全部
-
图形变换 位移translate(x,y) 旋转 rotate(deg) 缩放 scale(sx,sy) 缩放出现的问题 1.如果有lineWith，宽度也会缩放 2.如果起始点不是0 0，起始点也会缩放查看全部
-
context.save();和context.restore();成对出现，使用前加save();保存所有状态，使用后加restore();恢复到保存状态, 如果不使用就会继承上面已做的处理效果，比如下面的translate()查看全部
-
线条的不同属性 首尾两端 lineCap="butt"(default) round square 线条链接 lineJoin="miter" miterLimit=10默认值为10 bevel round查看全部
-
miterLimit 默认值为10 lineJoin 三个参数 miter bevel round miterlimit 只有参数是miter时候才可以使用查看全部
-
关于cos((18+i*72)/180*Math.PI) 角度弧度转换公式： 角度 = 弧度*180/Math.PI; 弧度 = 角度*Math.PI/180 sin(e)=y/d; cos(e) = x/d; 将这两个式子变一下就成： y = d*sin(e); x=d*cos(e); 对这两个式子，需要说明的是：角e在三角函数的运行中必须使用弧度制，这与我们习惯的角度制有所不同，所以我们需要记住角度弧度转换的公式： [cose]角度弧度转换公式： 角度 = 弧度*180/Math.PI; 弧度 = 角度*Math.PI/180;[/code] PI是园周率，即3.14159,它属于Math类写法为：Math.PI.三角函数也属于Math类。所以上面的公式正确写法是： x= d*Math.cos(e) e为弧度表示 y=d*Math.sin(e)查看全部
-
五角星计算 sin 对边/斜边 cos 邻边/斜边 注意：1.y轴方向相反，所以用负值 2.五角星的夹角是72度，所以每个角加上72，查看全部
-
txt.lineCap="butt"注意这里是等号 有三个参数 butt round square 这个参数只能用于线段的开始处和结尾处 closePath() 和lineCap="square";都可以封闭图像，但是建议用closePath(); <canvas id="canvas" ></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.lineWidth=30; context.strokeStyle="#058"; context.beginPath(); context.lineTo(100,100); context.lineTo(300,100); context.lineCap="butt"; context.stroke(); context.beginPath(); context.lineTo(100,200); context.lineTo(300,200); context.lineCap="round"; context.stroke(); context.beginPath(); context.lineTo(100,300); context.lineTo(300,300); context.lineCap="square"; context.stroke(); context.moveTo(100,0); context.lineTo(100,500); context.moveTo(300,0); context.lineTo(300,500); context.lineWidth=1; context.stroke(); }查看全部
举报
0/150
提交
取消