-
曲线绘制： context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false); centerx;圆心x， centery：圆心y， radius：半径 startingAngle：起始角度 endingAngle：结束角度 anticlockwise：是否逆时针查看全部
-
var pattern = context.createPattern(img/canvas/video, repeat-style);<br> repeat-style: <br> no-repeat 不重复<br> repeat-x X轴方向重复<br> repeat-y Y轴方向重复<br> repeat X，Y轴方向都重复查看全部
-
径向渐变： context.createRadialGradient(x1,y1,r1,x2,y2,r2); addColorStop(stop,color)查看全部
-
var linearGrad = context.createLinearGradient(Xstar,Ystar,Xend,Yend);创建线性渐变（起始位置X，Y，结束位置X，Y） linearGrad.addColorStop(stop,color);stop是位置：0.0~1.0，color是要填充的颜色 context.fillStyle = linearGrad;查看全部
-
对封闭的多边形进行填充 ：fillStyle查看全部
-
transform(a,b,c,d,e,f) 转换 setTransform(a,b,c,d,e,f) 取消之前所有的转换，重新设置转换查看全部
-
这个可以实现星星不重复 for (var i = 0; i < 100; i++) { var sum=0; var aStar={ R:Math.random()*10+10, x:Math.random()*460+20, y:Math.random()*460+20, a:Math.random()*360 } if (stars.length==0) { stars.push(aStar); console.log('x') } else{ //第二个以上的星星都要和数组stars里的星星进行比较，和数组里面全部的星星比较完后sum等于star.length，则证明aStar和所有已经存在的星星不重复，就push到数组 for (var i = 0; i < stars.length; i++) { if (Math.sqrt(Math.pow(aStar.x-stars[i].x,2)+Math.pow(aStar.y-stars[i].y,2))>aStar.R+stars[i].R) { sum++; }; if (sum==stars.length) { stars.push(aStar); };}; }; console.log("星星个数: "+stars.length) }; for (var i = 0; i < stars.length; i++) { drawStar(context,stars[i].R,stars[i].R/2,stars[i].x,stars[i].y,stars[i].a);};查看全部
-
位移：translate 旋转：rotate 缩放：scale Canvas状态的保存和恢复：save(),restore()查看全部
-
font属性值查看全部
-
吧查看全部
-
吧查看全部
-
context.rect(x, y, width, height); //自动绘制矩形，规划路径 context.fillRect(x, y, width, height); //绘制填充矩形 不但规划路径，还把矩形给画出来 context.strokeRect(x, y, width, height); //绘制矩形边框 不但规划路径，还把矩形给画出来查看全部
-
context.closePath(); //自动闭合图形，最后一条线自动画出。<br> context.fillStyle = "yellow"; context.fill(); //自动填充颜色 先画填充色，再给图案描边。这样图案内边线就不会被填充色覆盖。查看全部
-
context.beginPath() 开始新的绘制<br>,之后，如果context的某个属性一直没有被改变，那么就一直用那个值 context.moveTo 指定新的起始坐标<br> context.lineTo 画线查看全部
-
canvas 是一个基于状态的绘制环境，不是面向对象的。查看全部
举报
0/150
提交
取消