本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：demo#canvas {background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;}(function() {var dyl = {};dyl.getDom = function(id) {return document.getElementById(id);}dyl.getContext = function(canvasID) {var canvas = this.getDom(canvasID);if(!canvas) {return n...
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：demobody {margin:0; padding:0; }#canvas {border:5px solid gray; box-shadow:0 0 15px 15px #494949 inset;margin-top:50px; margin-left:200px;}var dyl = {};dyl.canvas = document.getElementById("canvas");dyl.ctx = dyl.canvas.getContext("2d");dyl.runTime = 0;dyl.colorList = "01234567...
本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考，具体如下： 运行效果截图如下：index.html代码如下：canvas中的缩放#canvas {background:black; margin-top:100px; margin-left:200px;}cache = {};var offsetX = 50,offsetY = 20;cache.context = dyl.createContext('canvas');dyl.rect(dyl.createColor(), 60 + offsetX, 0 + offsetY, 185, 100);dyl.rect(dyl.createColor(), 100 + offsetX, 100 +...
本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：canvas自由落体var canvasheight = 500;var canvaswidth = 500;var g = 9.8;var plusV = 0.5;function Block(vo, x, y, width, height, g, context) {var _self = this;_self.vo = vo || 0;_self.x = x;_self.y = y;_self.prevX = x;_self.prevY = y;_self.g = g;_self.height = height;_self.width = width;_se...
本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考，具体如下：HTML部分：canvas绘图JavaScript部分：function init(){var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");setInterval(function(){draw(canvas, context)},1000); } function draw(canvas, context){var x = canvas.width,y = canvas.height,r = Math.min(x/2, y/2);context.clearRect(0, 0, x, y); //清除...
对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。完整的代码在这里https://github.com/wwervin72/HTML5-Clock。 那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位...
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出： 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个 代码如下: 代码如下: eraser effect #canvas { background:url(winning-ticket.j...
css3 Animation： 代码如下: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/} }Jquery ： 代码如下:$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画也可以在css样式里添加如下： 代码如下: #element{-webkit-animation: twinkling 1s infinite ease-in-out; }注：...
项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement;//W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozReq...
你一定知道 HTML5新增的 placeholder 属性吧？不知道的也没关系。输入框有默认文本是，常需要这样一个效果，点击让默认文本消失，失去焦点后让默认文本显示。 今天分享一段jQuery代码，模拟 placeholder 效果。 Javascript代码：代码如下: function placeHolder(event){var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();if(selfDataValue){event.type == "click" ? (selfValue == selfDataVa...
本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法。分享给大家供大家参考。具体实现方法如下：Your browser does not support the HTML5 canvas tag.var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); ctx.fillStyle=grd; ctx.fillRect(0,0,175,50);希望本文所述对大家的web程序设计...
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下： 下面的玫瑰绘制用到了HTML 5的canvas，所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome，这个效果在Firefox下也会稍卡。 效果图：演示地址：http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下：3D玫瑰花情人节快到了，这里送大家一枝玫瑰，无论是有对象还是没对象的朋友们，情人节快乐～ 下面的玫瑰绘...
本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果。分享给大家供大家参考。具体如下： 这里运用HTML5实现的单车动画，运行一下效果你就明白了，不过不要在IE8下测试，没效果的。请在支持最新HTML3和CSS3的浏览器下测试，祝您好运。 运行效果截图如下：具体代码如下：Canvas Lab单车动画，HTML5动画 var framecounter = 800;//为了完成作业，无耻了点，在这里设置变量……var direction = "left";function drawBikeBody ...
本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下： 这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。 运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/ 具体代码如下：HTML5上传...
先给大家展示效果：查看演示 源码下载 你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。 我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。HTML我...