-
star分析，公式查看全部
-
rgba(0,256,256,0.8)是三个颜色加透明度值查看全部
-
三种绘制矩形的方式，rect(x,y,width,height)/fillRect(x,y,width,height)/strokeRect(x,y,width,height)查看全部
-
canvas状态设置查看全部
-
canvas基于状态的绘制查看全部
-
canvas查看全部
-
fillStyle,strokeStyle取值方式查看全部
-
上一节中的drawStar()函数从软件工程的角度考虑它承载的数据太多了，而且日后修改也不方便，所以我们可以在该函数外部编写一个函数starPath()放在其内 基本的图形变换： 位移：translate( x, y )：把图像从原位置位移(x， y)个数量位置 旋转：rotate( deg )：旋转 deg 度数 缩放：scale( sx, sy )：在横向进行 sx 倍的缩放，在纵向进行 sy 倍的缩放 主意：以上图形变换有一个陷阱，就是多次使用会叠加，为了解决这个问题，我们可以使用以下 canvas 状态的保存和恢复： context.save(); //保存当前图形的状态，包括给图形设置的所有状态 context.restore(); //返回在save()节点时 canvas 的所有状态（和 context.save()成对出现）查看全部
-
<body> <canvas id="cvs" >不支持canvas</canvas> </body> <script type="text/javascript"> var cvs=document.getElementById("cvs"); cvs.width=600; cvs.height=600; var context=cvs.getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,cvs.width,cvs.height); for(var j=0;j<200;j++){ var r=Math.random()*10+10; var x=Math.random()*600; var y=Math.random()*600; var a=Math.random()*360; drawStar(context,r/2,r,x,y,a); } function drawStar(cnt,r,R,x,y,rot){ cnt.beginPath(); if(!rot) rot=0; for(var i=0;i<5;i++){ cnt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y); cnt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } cnt.closePath(); cnt.lineWidth=10; cnt.strokeStyle="yellow"; cnt.fillStyle="yellow"; cnt.lineJoin="round"; cnt.stroke(); cnt.fill(); } </script>查看全部
-
1.设置矩形路径状态 cxt.moveTo(x,y); cxt.lineTo(x+width,y); cxt.lineTo(x+width,y+height); cxt.lineTo(x,y+height); 以上可以用内置的函数简写： cxt.rect(x,y,width,height); 2.cxt.fillRect(x,y,width,height);//填充矩形函数 cxt.strokeRect(x,y,width,height);//绘制矩形函数 当使用以上2个函数时可以省略以下： cxt.rect(x,y,width,height);//设置矩形路径状态 cxt.fill();//填充函数 cxt.stroke();//绘制路径函数 3.fillStyle和strokeStyle颜色的赋值(css支持的颜色，canvas都支持)，可以上以下： #ffffff #642 rgb(255,128,0) rgba(100,100,100,0.8)//a就是透明值 hsl(20,62%,28%) hsla(40,82%,33%,0.6) red查看全部
-
lineJoin 线条相交的效果： 默认：miter 尖角、 bevel 斜接、 round 圆角。 miterLimit 默认值为10，内角距离的最大值(线条本身实线的夹角和宽度外线相交夹角的距离)，超过miterLimit值的话将使用bevel。 miterlimit 只有当lineJoin属性为miter时才可以使用。查看全部
-
先填充颜色，后描边，先fillStyle、在stroke查看全部
-
canvas的设置要放前面查看全部
-
canvas图形库查看全部
-
arcTo使用到的两条线为辅助线，用来限定圆弧的位置而已，指定两个点不一定是起点和切点。只是用来标识一段线段的而已。切点，起点，可能在这两个辅助线的延长线上！查看全部
举报
0/150
提交
取消