<!DOCTYPE html>
<style>
body {-webkit-user-select:none}
#canvas {border:1px solid #CCC}
#upload {display:block}
</style>
<canvas id="canvas"></canvas>
<input type="button" id="upload" value="上传" />
<script>
var canvas,g,w,h,px,py,o,state
//获取canvas
canvas=document.getElementById("canvas")
//定义canvas大小
w=canvas.width=400,h=canvas.height=300
//获取canvas相对位置
px=canvas.offsetLeft,py=canvas.offsetTop
//获取2d绘图对象
g=canvas.getContext("2d")
//定义线条宽度
g.lineWidth=6
//设置线条接头处为圆滑的
g.lineCap=g.lineJoin="round"
//鼠标按下
document.onmousedown=function(e){
if(e.button)return//非鼠标左键直接跳出
state=true//左键状态标识为按下
g.beginPath()//创建绘图路径
//移动绘图位置到当前鼠标位置
g.moveTo(e.clientX-px,e.clientY-py)
}
//鼠标放开
document.onmouseup=function(e){
if(e.button)return//非鼠标左键直接跳出
state=false//左键状态标识为松开
g.closePath()//关闭绘图路径
}
//鼠标在canvas上移动
canvas.onmousemove=function(e){
//如果鼠标左键不是处于按下状态就直接跳出
if(!state)return
//从上一个位置到当前位置绘制线条路径
g.lineTo(e.clientX-px,e.clientY-py)
g.stroke()//渲染路径
}
//上传按钮点击
document.getElementById("upload").onclick=function(){
//Ajax提交数据
var xhr=new XMLHttpRequest
xhr.open("POST","upload.php",true)
xhr.onreadystatechange=function(){
if(xhr.readyState!=4)return
//服务器返回的是这个图片在服务器上的URL
//这里直接新页面打开它
open(xhr.responseText)
}
//从canvas中获取DataURL并发送
xhr.send(canvas.toDataURL())
}
</script>
新浪微博H5是新浪微博的一个版本。HTML5是一种新的浏览器语言。此版本支持HTML内容，并且表示html5版本需要更高的浏览器。
新浪微博版本支持HTML5内容，意味着这是根据最新技术开发的浏览内容的新版本，并且是随着互联网技术的进步改进网站内容的一种形式。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储。
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
扩展资料：
HTML5可以提供:
1.提高可用性和改进用户的友好体验
2.有几个新的标签，这将有助开发人员定义重要的内容；
3.可以给站点带来更多的多媒体元素(视频和音频)；
4.可以很好的替代FLASH和Silverlight；
5.当涉及到网站的抓取和索引的时候，对于SEO很友好；
6.将被大量应用于移动应用程序和游戏。
谷歌和HTML5
2010年5月22日，谷歌创建了一个涂鸦来纪念PacMan的视频游戏。这个涂鸦是一个动画，同时也是一个可以玩的PacMan的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的。
HTML5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。
不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML5都是创新的主旋律。
参考资料：百度百科-HTML5
这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。我们先来看html代码。
复制代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet"
type="text/css"
href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div
class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button"
id="play_label"></label>
<input type="checkbox" id="play_button"
name="play_button"/>
<span id="play_image">
<img
src="img/muybridge12-hp-p.jpg"/>
</span>
<div
class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>
下面是部分css。
复制代码
代码如下:
*{margin:0pxpadding:0px}
#logo{position: relative}
.horse{
width:469px
height:54px
background: url('../img/muybridge12-hp-f.jpg')
}
.frame{position:absoluteleft:0top:0z-index: 1}
#play_button{display:
none}
#play_label{
width:67px
height:54px
display:block
position: absolute
left:201px
top:54px
z-index: 2
}
#play_image{
position: absolute
left:201px
top:54px
z-index: 0
overflow: hidden
width: 68px
height: 55px
}
#play_image img{
position: absolute
left: 0
top: 0
}
这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。
下面是上述html和css代码完成的页面效果。
pic
下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp
了解更多信息。
我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。
复制代码
代码如下:
@-webkit-keyframes horse-ride {
%
{background-position: 0 0}
% {background-position: -804px 0}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0}
%
{background-position: -804px 0}
}
下面，我们来为horse添加css3的动画效果。
复制代码
代码如下:
#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite
-webkit-animation-delay:2.5s
-moz-animation:horse-ride 0.5s
steps(12,end) infinite
-moz-animation-delay:2.5s
background-position:
-2412px 0
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,
0.190)
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190)
}
这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。
接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。
最后我们为【开始】按钮添加动画效果。
复制代码
代码如下:
#play_button:checked ~#play_image img{
left:-68px
-webkit-transition: all 0.5s ease-in
-moz-transition:
all 0.5s ease-in
}
大家可以自己动手尝试开发了。
demo下载地址：google-doodle-animation-in-css3-without-javascript.zip今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。
我们先来看html代码。
复制代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet"
type="text/css"
href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div
class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button"
id="play_label"></label>
<input type="checkbox" id="play_button"
name="play_button"/>
<span id="play_image">
<img
src="img/muybridge12-hp-p.jpg"/>
</span>
<div
class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>
下面是部分css。
复制代码
代码如下:
*{margin:0pxpadding:0px}
#logo{position: relative}
.horse{
width:469px
height:54px
background: url('../img/muybridge12-hp-f.jpg')
}
.frame{position:absoluteleft:0top:0z-index: 1}
#play_button{display:
none}
#play_label{
width:67px
height:54px
display:block
position: absolute
left:201px
top:54px
z-index: 2
}
#play_image{
position: absolute
left:201px
top:54px
z-index: 0
overflow: hidden
width: 68px
height: 55px
}
#play_image img{
position: absolute
left: 0
top: 0
}
这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。
下面是上述html和css代码完成的页面效果。
pic
下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp
了解更多信息。
我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。
复制代码
代码如下:
@-webkit-keyframes horse-ride {
%
{background-position: 0 0}
% {background-position: -804px 0}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0}
%
{background-position: -804px 0}
}
下面，我们来为horse添加css3的动画效果。
复制代码
代码如下:
#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite
-webkit-animation-delay:2.5s
-moz-animation:horse-ride 0.5s
steps(12,end) infinite
-moz-animation-delay:2.5s
background-position:
-2412px 0
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,
0.190)
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190)
}
这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。
接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。
最后我们为【开始】按钮添加动画效果。
复制代码
代码如下:
#play_button:checked ~#play_image img{
left:-68px
-webkit-transition: all 0.5s ease-in
-moz-transition:
all 0.5s ease-in
}
大家可以自己动手尝试开发了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）