为了账号安全,请及时绑定邮箱和手机立即绑定
  • canvas 默认大小是宽*高 = 300*150
    查看全部
    0 采集 收起 来源:创建canvas

    2016-06-18

  • for循环不加 { } 只循环其后的第一条语句,加 { } 循环{}中的所有语句
    查看全部
  • context方法
    查看全部
    0 采集 收起 来源:总结

    2016-06-17

  • canvas
    查看全部
    0 采集 收起 来源:总结

    2016-06-17

  • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="canvas" > </canvas> <!--<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>--> <script> window.onload=function (){ var canvas=document.getElementById('canvas'); canvas.width=1024; canvas.height=768; //调整浏览器兼容性问题 if(canvas.getContext('2d')){ var context=canvas.getContext('2d'); context.moveTo(100,100) content.lineTo(800,800) context.lineWidth(5) context.strokeStyle='aqua'//颜色是字符串 context.stroke() } else{ alert('浏览器不兼容,请选择其他浏览器谢谢!'); } } </script> </body> </html> 为什么没有效果呀,忧伤,请大神看看吧
    查看全部
  • 初始化小球的状态 x:512,y:100代表小球的初始坐标,r:20代表半径20,g:2加速度为2 vx:-4 代表x轴上的方向是4,负号代表方向 vy:0 竖直方向的速度为0 颜色color
    查看全部
  • clearRect对整个的矩形进行一次刷新
    查看全部
  • 判断倒计时,/1000 毫秒转换成秒
    查看全部
  • 绘制时分秒的时候是一位数一位数的绘制,因此/10 拿到每一个数字
    查看全部
  • .title_step p{ margin-top: 20px; color: red; } .title_step a{ display: block; float: right; font-size: 10px; margin: 30px 10px 0 0; } /*右边手机信息 : 1,选择版本 */ .J_stepList{ } .J_stepItem{ float: left; width: 265px; height: 50px; line-height: 50px; text-align: center; margin: 1px 16px 15px 0px; border: 1px solid #e3e3e3; } .J_stepItem button:focus,.next_step button:focus{ outline: 1px solid red; } .banben_step p,.color_step p{ font-size: 18px; } .banben_step{ } /*右边手机信息 : 2,选择颜色 */ .color_step{ } /*右边手机信息 : 3,结算下一步 */ .next_step span{ color: #9b9b9b; display: block; font-size: 10px; } .next_step button{ margin: 30px 0; background-color: #fff; border: 1px solid #e3e3e3; color: #9b9b9b; width: 178px; height: 48px; }
    查看全部
  • /*购买结算页样式文件*/ /* 头部导航 */ .buynow_nav{ padding: 10px 0; } .buynow_nav ul li{ width: 12.5%; float: left; height: 76px; line-height: 76px; margin: 0 0 -1px; text-align: center; font-size: 14px; border-bottom: 1px solid #dfdfdf; cursor: pointer; } .buynow_nav ul li a{ display: block; color: #333; outline: none; } .buynow_nav .active { border-bottom-color: #333; } /*左边手机图片信息*/ .phone_img{ width: 50%; height: 600px; float: left; _display: inline; margin: 50px 0 0 0px; overflow: auto; } /*右边手机信息*/ .phone_info{ width: 45%; margin: 50px 0 0 55px; } /*右边手机信息 : tiile */ .title_step{ height: 60px; margin-bottom: 55px; border-bottom: 1px solid #dfdfdf; } .pro_title{ margin: 0; font-size: 30px; line-height: 56px; font-weight: normal; } .pro_price{ margin-left: 10px; font-size: 28px; color: #ff6700; }
    查看全部
  • <div class="color_step"> <p>2. 选择颜色</p> <ul class="step-list clearfix J_stepList"> <li class="J_stepItem">经典金色</li> <li class="J_stepItem">经典银白</li> <li class="J_stepItem">经典深灰</li> </ul> </div> <div class="next_step"> <p>您选择了以下产品</p> <span>红米手机3 全网通 3GB内存+32GB容量 指纹识别</span> <button class="btn btn-group-lg">下一步</button> </div> </div> </div> </div>
    查看全部
  • <div class="buynow_bd clearfix"> <div class="phone_img fl"> </div> <div class="phone_info fr"> <div class="title_step"> <span class="pro_title">购买红米手机3 </span> <span class="pro_price">699元起</span> <a href="">深入了解本产品&gt;</a> <p>温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</p> </div> <div class="banben_step"> <p>1.选择版本</p> <ul class="step-list clearfix J_stepList"> <li class="J_stepItem">全网通 2GB内存+16GB容量</li> <li class="J_stepItem"> 全网通 3GB内存+32GB容量 指纹识别</li> </ul> </div>
    查看全部
  • <!--<div ng-include="'view/common/header.html?buyNow=1'"></div>--> <div xm-include src="view/common/header.html"></div> <div class="container"> <div class="buynow_nav clearfix"> <ul> <li><a href="">红米Note3</a></li> <li><a href="">红米手机3</a></li> <li><a href="">小米手机5</a></li> <li><a href="">小米Max</a></li> <li><a href="">小米Note</a></li> <li><a href="">小米手机4c</a></li> <li><a href="">小米手机4</a></li> <li><a href="">对比手机</a></li> </ul> </div>
    查看全部
  • <body> <canvas id="canvas" > 当前浏览器不支持Canvas,请更换浏览器后再试! </canvas> <script> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=1024; canvas.height=768; if(canvas.getContext("2d")){ var context=canvas.getContext("2d"); }else{ alert("当前浏览器不支持Canvas,请更换浏览器后再试!"); } } </script> </body>
    查看全部
    0 采集 收起 来源:创建canvas

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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