初学lufylegend.js之日，我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏，还写了篇博文来炫耀一下：HTML5小游戏《智力大拼图》发布，挑战你的思维风暴。不过当时初学游戏开发，经验浅薄，所以没有好好专研游戏里的算法和代码的缺陷，导致游戏出现了很多bug，甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏，希望我能把代码里的bug改一下方便初学者学习，顺便我也打算测试一下自己写这种小游戏的速度，所以就抽...
这是一款来自Doodle的创意作品，它是一个基于HTML5 Canvas的电吉他，当我们将鼠标滑过吉他的弦时，电吉他将会发出美妙的声音，更加酷的是，你可以利用键盘来弹奏一首悦耳的乐章，非常强大的HTML5。在线演示源码下载HTML代码<p id=hplogo border="0"> <p id=hplogo-g> <p id=hplogo-click onclick=google.doodle.go();></p> <p id=hplogo-lcd-screen></p> <p id=hplogo-lcd-icon></p><INPUT id=hplogo-lcd-text onclick=this.focus...
一个贪吃蛇小游戏javascrpt有效代码17行加上html代码的话，共25行运行方法chrome或者firefox测试连接http://lufylegend.com/html5/lufylegend/tcs.html完整代码如下<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> <script> var ctx=document.getElementById("myCanvas").getContext("2d"),r = ...
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke();运行结果绘制出来的并不是一个像素宽度的线感觉怎么好粗啊，跟常常见到的网页版各种绘制线效果很不一样，难道HTML5 Canvas就没想到搞好点嘛其实这个根本原因在于Canvas的绘制不是从中间开始的而是从0～1，不是从0.5～1 + 0～0.5的绘制方式，所以导致fade在边缘，看上去线很宽。解决方法有两个，一个是错...
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能。代码的演示效果如下：组件fishcomponent.js的代码...
HTML5 Canvas阴影用法演示HTML5 Canvas中提供了设置阴影的四个属性值分别为：context.shadowColor = “red” 表示设置阴影颜色为红色context.shadowOffsetX = 0表示阴影相对TEXT的水平距离，0表示两者水平位置重合context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离，0表示两者垂直位置重合context.shadowBlur = 10 阴影模糊效果，值越大模糊越厉害。一个最简单的带有阴影的矩形代码如下：context.shadowColor = "RGBA(127,127,...
HTML5 Canvas 填充与描边(Fill And Stroke)演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。一：颜色填充与描边颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例如下：// fill and stroke text ctx.font = 60pt Calibri; ctx.lineWidth = 3; ctx.strokeStyle = green; ctx.strokeText(Hello World!, 20, 100); ctx.fillStyle = red; ctx.fillText(Hello World!, 20, 10...
HTML5 Canvas动画效果演示主要思想：首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。关键技术点：JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，另外一个参数代表间隔时间，单位为毫秒数。代码示例：setTimeout( update, 1000/30);Canvas的API-drawImage()方法，需要指定全部9个参数：ctx.drawImage(myImage, offw, o...
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x, y)。代码演示：// translate is move the startpoint to centera and back to top left corner function renderText(width, height, context) {contex...
html5 canvas绘制矩形和圆形的实例代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="draw(),drawarc()"> <!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式--> <!--绘制其他复杂图形需要使用路径：开始创建路径->创建图形路径->关闭路径->绘制图形--> <!--eg:绘制矩形--> 绘制矩形:<canvas id="ca"></canvas><br /> 绘制圆形：<c...
HTML5对于表单有着极大程度的优化，无论是语义，小部件，还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”，但这绝不应该成为使你停滞不前的原因，况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时，我保证你会爱上它。如果说唯一的缺陷，就是提示框的样式是浏览器默认的，你无法改变，好吧，如果你相信浏览器厂商的设计师...
最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。下面是预览画面。制作流程首先你需要下载Html5开源库件lufylegend-1.4.0魔方分为6个面，每个面由9个小矩形组成，现在我把每个小矩形当做一个类封装起来，因为现在建立的是一个3D魔方，所以要画出每个小矩形，需要知道小矩形的4个定点，而这4个定点会根据空间的旋转角度而变换，所以为了计算出这4个定点坐...
废话不多说，先给大家展示下效果图：蛋糕分为三个部分，底部蛋糕，顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate，内外阴影等效果调整部分DOM元素样式。比较简单，相信码农都懂的。不赘述其它有的没的了。下面给出完整的的HTML代码和CSS代码<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.birthday .container{width:600px;height:600px;...
抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。以下是效果截图：1.页面代码：usersRegister.hbs<!DOCTYPE html> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta http-equiv="Content-Type...
在HTML5中，拖放是标准的一部分，任何元素都能够拖放，具体内容如下1、拖放 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); v...