为了账号安全,请及时绑定邮箱和手机立即绑定
  • 这个挺好,通过计算得到具体位置,并有规律可循
    查看全部
  • //stroke()是用于线条绘制的,fill()也能用于绘制,但是用于填充色绘制 fillStyle = "填充色"; fill(); 注意stroke()的使用,如果是分别绘制多条线的话,应该在每个准备绘制的系列操作前后加上beginPath()与closePath()方法,否则多线条绘制将会在最后一个stroke中将所有的绘制状态都将按照最后的绘制设置来绘制
    查看全部
  • 圆心位置
    查看全部
  • canvas中,以左上角为原点,向右为x轴正方向,向下为y轴的正方向 //选中canvas中的(x,y)中的位置作为绘制起点 moveTo(x,y); //画线至canvas中(x,y)的位置 lineTo(x,y); //线条宽度 lineWidth = 5; //线条颜色 strokeStyle = "#005588" //执行绘制 strock();
    查看全部
  • canvas的上下文对象在做完了绘画工作后,须调用stroke()的方法才能产生绘制的效果
    查看全部
  • 声明一个<canvas>时,最好是在该标签中声明width与height的大小(不带有单位),不推荐用css的方式来为canvas设置widht与height的大小,因为这样只是指定了canvas在浏览器中应显示多大的面积并没有指定canvas中内容的显示的大小
    查看全部
    0 采集 收起 来源:创建canvas

    2018-03-22

  • pi不受顺时针、逆时针影响
    查看全部
    0 采集 收起 来源:绘制弧和圆

    2015-01-29

  • arc(x,y,radius,startA,endA,N or s)
    查看全部
    0 采集 收起 来源:绘制弧和圆

    2015-01-29

  • var obj = document.getElementById("xx") var context = obj.getContext("2d"); draw() { beginPath moveTo lineTo closePath fillStyle fill() lineWidth strokeStyle stroke() } done
    查看全部
  • 把碰撞动能损失和地板滚动摩擦考虑进去。 function update(){ ball.vy+=ball.g; ball.x+=ball.vx; ball.y+=ball.vy; if (ball.y>600-ball.r) { ball.y=600-ball.r; if(Math.abs(ball.vy)>2) {ball.vy=-ball.vy*0.75;} else{ if(Math.abs(ball.vx)<0.2){ ball.vx=0; } else{ ball.vx=ball.vx>0?ball.vx-0.05:ball.vx+0.05; } } } if(ball.y<ball.r){ ball.y=ball.r; ball.vy=-ball.vy*0.75; } if(ball.x<ball.r){ ball.x=ball.r; ball.vx=-ball.vx*0.75; } if(ball.x>1300-ball.r){ ball.x=1300-ball.r; ball.vx=-ball.vx*0.75; } }
    查看全部
  • Canvas的三个方法:
    查看全部
    0 采集 收起 来源:创建canvas

    2015-01-27

  • 为了向<canvas>元素上绘图,必须经过以下几步: 1.获取canvas元素对应的DOM对象; 2.调用Canvas对象的getContext()方法,方法要传参,如:getContext('2d')。该方法返回一个CanvasRenderingContext2D对象,该对象即可绘制图形。
    查看全部
    0 采集 收起 来源:创建canvas

    2018-03-22

  • <canvas id="canvas"></canvas> 不指定canvas大小时,默认300px宽,150px高。不建议用css的方式设置canvas大小,因为css指定的是canvas画布的显示大小,但是对于canvas来说,而不能指定canvas内部的元素分辨率大小。因此建议直接使用width和height属性设置canvas的大小,width和height不写单位px。如:<canvas id="canvas" width="1024" height="768"></canvas>
    查看全部
    0 采集 收起 来源:创建canvas

    2018-03-22

  • <script> var xiaoban=[{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"rgb(96,182,208)"},{p:[{x:0,y:0},{x:400,y:400},{x:800,y:0}],color:"rgb(202,241,97)"},{p:[{x:0,y:800},{x:200,y:600},{x:400,y:800}],color:"rgb(254,156,205)"},{p:[{x:400,y:800},{x:200,y:600},{x:400,y:400},{x:600,y:600}],color:"rgb(166,153,195)"},{p:[{x:600,y:600},{x:400,y:400},{x:600,y:200}],color:"rgb(252,234,17)"},{p:[{x:600,y:200},{x:800,y:0},{x:800,y:400},{x:600,y:600}],color:"rgb(255,80,97)"},{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"rgb(252,197,32)"}, ] var canvas=document.getElementById("qiqiaobao"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); draw(xiaoban,context); function draw(a,b){ for (var i=0;i<a.length;i++) { b.beginPath(); b.moveTo(a[i].p[0].x,a[i].p[0].y); for(var j=1; j<a[i].p.length; j++){ b.lineTo(a[i].p[j].x,a[i].p[j].y); } b.closePath(); b.fillStyle=a[i].color; b.fill(); } } </script>
    查看全部
  • var canvas=document.getElementById('canvas') var context=canvas.getContext('2d') /使用contex绘制
    查看全部
    0 采集 收起 来源:创建canvas

    2015-01-26

举报

0/150
提交
取消
课程须知
1.要对HTML+CSS相关标签有所掌握;2.对网页布局知识有简单的了解;3.掌握一定的JS基础知识
老师告诉你能学到什么?
通过学习Cancas倒计时效果的基础知识:比如球形的绘制,动画的基础原理,让Canvas帮助我们制作出绚丽的效果,力图每一个课程除了介绍知识,还能帮助大家使用Canvas制作出属于自己的动画和游戏作品。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!