2019年11月21日
Canvas 五角星绘制
摘要： 效果图： 知识点： 1、五角星顶点坐标 (r*cos(deg)+x,-r*sin(deg)+y) 2、画圆 ctx.arc(x,y,r,0,2*Math.PI); //后两个参数开始弧度，结束弧度。0表示开始弧度为3点钟方向，0.5PI为90度。 代码： <!DOCTYPE html> <html> 阅读全文
posted @ 2019-11-21 21:06 梁涛999 阅读(612) 评论(0) 推荐(0)
Canvas 矩形绘制
摘要： 效果图： 知识点： 1、context.beginPath(); 2、context.closePath(); 3、context.Rect(x,y,width,heght); context.fllRect(x,y,width,heght); context.strokeRect(x,y,widt 阅读全文
posted @ 2019-11-21 21:05 梁涛999 阅读(159) 评论(0) 推荐(0)
2019年11月18日
Canvas 基础知识
摘要： <canvas> 标签是 HTML5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。 <canvas id="canvas"> 您的浏览器不支持canvas </canvas> 兼容性 阅读全文
posted @ 2019-11-18 22:59 梁涛999 阅读(214) 评论(0) 推荐(0)
2019年11月15日
CSS3 时钟效果实现
摘要： 效果图： 知识点： 1、transform-origin 2、弧度计算公式 (2*Math.PI/360)*角度 3、表盘数字计算方法 x=r(1+Math.cos(弧度))； y=r(1+math.sin(弧度))； 完整代码： <!DOCTYPE html> <html> <head> <met 阅读全文
posted @ 2019-11-15 22:04 梁涛999 阅读(1573) 评论(0) 推荐(0)
2019年11月13日
JS toFixed四舍五入精度校正
摘要： var a = 2.255; var b = a.toFixed(2); console.log(b); 以上代码，按预期正常四舍五入得到结果应该是2.26，但实际返回值为2.25 js浮点数精度作为前端必踩坑，谁也逃不过，不过我们可以改写原型上的方法达到目的 Number.prototype.to 阅读全文
posted @ 2019-11-13 16:23 梁涛999 阅读(507) 评论(0) 推荐(0)
CSS3 实现恭贺新春页面
摘要： 效果： 在线运行 http://oa.hopenchina.com:8086/project/newyear/index.html（建议用手机查看） 知识点： 1、box-sizing:border-box 2、:before 3、first-of-type 4、设置box背景渐变、阴影、边框 ba 阅读全文
posted @ 2019-11-13 10:38 梁涛999 阅读(638) 评论(0) 推荐(0)
2019年11月10日
星级评分实现
摘要： 效果图： 图片： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> *{ padding:0; margin: 0; } .rating{ width:140px; heigh 阅读全文
posted @ 2019-11-10 23:40 梁涛999 阅读(167) 评论(0) 推荐(0)
2019年11月8日
CSS3 红包雨动画应用
摘要： 效果： 点击“在线运行”查看效果 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ padding: 0; margin: 0; } body,html{ height:100%; } .rightmenu{ 阅读全文
posted @ 2019-11-08 00:14 梁涛999 阅读(1341) 评论(0) 推荐(0)
2019年11月6日
CSS3 非线性时间函数应用
摘要： （网络图片、如侵权必删除） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .fire{ width:166.7px; height:29 阅读全文
posted @ 2019-11-06 18:12 梁涛999 阅读(330) 评论(0) 推荐(0)
2019年11月5日
CSS3 animation动画与transition过渡比较
摘要： 共同点 animation动画与transition过渡都可以实现动画效果，拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1、动画名称（name）@key-frame 2 阅读全文
posted @ 2019-11-05 23:17 梁涛999 阅读(495) 评论(0) 推荐(0)