Canvas绘图详解_技术问答

你函数参数值没对应起来具体就是以下两行代码

drawStart(context,r/2.0,r,x,y,a);
function drawStart(cxt,x,y,R,rot) {

没有一一对应啊，你把r/2.0当成x传给了 drawStart

不知道能不能理解

2018-11-30 1回答·868浏览

为什么在进行图形变化的操作后，星星只固定在（0,0）处: 已采纳徐锦杰的回答; 绘制图形的点一直在(0,0)，先translate将绘制点移到(x,y)，然后开始drawstar才会改变位置; 2017-12-29 2回答·1367浏览

代码优化部分加了scale填充的颜色就没了？: 好吧，自问自答，也是坑了。scale把边框也给放大了，把填充色给覆盖了...; 2017-07-20 1回答·1209浏览

对于starPath函数: 五角星的半径在starPath里是不知道的，starPath只是画出一个标准五角星的样式，实际上你单独运行starPath是没有任何效果的，五角星的实际效果由scale（r，r）得出; 2017-04-06 1回答·903浏览

知道了，谢谢大家

2017-04-03 1回答·1196浏览

已采纳红书包的回答

for(var i = 0; i < 5; i++){

cxt.lineTo(Math.cos((18+i*72)/180*Math.PI*20),

-Math.sin((18+i*72)/180*Math.PI)*20 );

cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,

-Math.sin((54+i*72-)/180*Math.PI)*0.5*20);

最后一排多了个“-”号

2016-12-16 2回答·1772浏览

关于translate是否移动坐标轴，视频5分14说经过translate位移后坐标还是（0，0），但是W3C上不是这么定义的啊: 感觉应该还是有影响的; 2016-08-26 3回答·1354浏览

ctx代表整个画布，那ctx.rotate(rot / 180 * Math.PI)是旋转画布而不是单个五角星吗？: 已采纳 Icekiller 的回答; rotate的旋转是你当前画布里面的元素，绘制五角星，使用for循环画出多个五角星，每次循环都使用了beginPath();; 2016-08-25 4回答·3342浏览

fillStyle没效果: 已采纳灯元的回答; function drawStar(cxt,r,R,x,y,rot){
  cxt.beginPath();
    for(var i=0;i<5; i++){
  cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
      -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
  cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
   -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
   }
   cxt.closePath();

   cxt.strokeStyle="#fd5";
   cxt.lineWidth=3;
   cxt.fillStyle="#fd3";
   cxt.lineJoin="bevel";
   cxt.fill();
   cxt.stroke();

  }; 2016-07-13 1回答·1555浏览