为了账号安全,请及时绑定邮箱和手机立即绑定
  • 不错
    查看全部
    2 采集 收起 来源:创建canvas

    2018-03-22

  • digit.js存储二维点阵模型供countdown.js使用 digit.js 申明一个三维数组digit 0包含的是一个二维数组(0的二维点阵)...第十个位置是:对应的二维点阵 每一个数字的点阵表示是10*7大小的二维数组 :是10*4大小的二维数组 countdown.js: 定义初始化——拿到canvas和context,给canvas大小赋值(两个全局变量)——绘制过程render(context)。 绘制canvas画布 function render(cxt){//绘制时钟,倒计时存储的具体数字 var hours=12 var minutes=34 var seconds=56 renderDigit(0,0,parseInt(hours/10),cxt)//参数表示绘制数字的x坐标,绘制数字的y坐标,具体绘制那个数字,上下文绘图环境 } function renderDigit(x,y,num,cxt){ cxt.fillStyle="rgb(0,102,153)"; for(var i=0;i<digit[num].length;i++){ for(var j=0;j<digit[num].i.length;i++){ if(digit[num][i]==1){ //绘圆球 } } } }
    查看全部
  • arc(頂點x座標,y座標,半徑長,開始位置,結束位置,是否為逆時鐘(預設為順)); beginPath()和closePath()不必成對出現 用了fill()即使沒有context.closePath();也會自動密合 如果沒有closePath()不會密合 0~2*Math.PI
    查看全部
    2 采集 收起 来源:绘制弧和圆

    2015-10-13

  • context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false);context.arc(圆心x坐标,圆心y坐标,半径的值,从哪一个弧度值为开始,到哪一个弧度值结束,可选参数:是顺时针方向绘制(false) 还是 逆时针方向绘制(true)),
    查看全部
    2 采集 收起 来源:绘制弧和圆

    2018-03-22

  • a.通过Css指定Canvas宽高 b.直接在标签中指定 c.在js中以.widht的方式指定。不建议a方式,canvas除了整块画布的大小,还有其内里的分别率大小,ps: Width和Height不带单位。 判断浏览器是否支持Canvas:a.直接在Canvas标签中写提示消息。b.在js中判断canvas.getContext("2d")返回的上下文环境是否为空。if(canvas.getContext("2d"))​
    查看全部
    2 采集 收起 来源:创建canvas

    2018-03-22

  • 把碰撞动能损失和地板滚动摩擦考虑进去。 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; } }
    查看全部
  • 老师,背景音乐名字是什么啊?挺好听的
    查看全部
  • 把碰撞动能损失和地板滚动摩擦考虑进去。 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; } }
    查看全部
  • 画直线(定义路径) context.moveTo(100,100) 从坐标100,100 context.lineTo(700,700) 到坐标700,700 context.stoke() 开始绘制 先绘制状态,再绘制 定义多种路径 context.beginPath(); context.closePath(); context.lineWidth 线条宽度 context.strokeStyle 线条颜色 context.fillstyle 填充颜色 context.stroke() 绘制线条 context.fill() 绘制填充颜色快
    查看全部
  • 要在html标签里面加上height:100%才能得到完整的浏览器高度
    查看全部
    2 采集 收起 来源:屏幕自适应

    2016-07-04

  • 背景音乐挺嗨 喜欢
    查看全部
  • <canvas id="canvas" weight="200" height="200" >
    查看全部
    1 采集 收起 来源:创建canvas

    2018-03-22

  • canvas方法 1.canvas.width 2.canvas.height 3.canvas.getContext('2d')
    查看全部
    1 采集 收起 来源:创建canvas

    2014-12-16

  • function draw(piece, cxt){ cxt.beginPath() cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i = 1; i< piece.p.length; i++) cxt.lineTo(piece.p[i].x,piece.p[i].y); cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); cxt.strokeStyle = "#000" cxt.lineWidth = 3; cxt.stroke(); }
    查看全部
  • WINDOW_WIDTH = window.screen.availWidth WINDOW_HEIGHT = window.screen.availHeight 这是获取屏幕高度时浏览器的差异,该用上面这种方法就基本可以解决问题,但是这样 计算的是window 不是document 所以还要处理一下其他部分
    查看全部
    1 采集 收起 来源:屏幕自适应

    2016-03-25

举报

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

微信扫码,参与3人拼团

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

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