如何实现HTML网页的涂鸦方式

2023-02-19 13:36:01html-css019

如何实现HTML网页的涂鸦方式,第1张

实现HTML网页的涂鸦方式代码和相关的代码注释如下：

<!DOCTYPE html>

<style>

body {-webkit-user-select:none}

#canvas {border:1px solid #CCC}

#upload {display:block}

</style>

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>

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<div

class="frame">

</div>

<label for="play_button"

id="play_label"></label>

<input type="checkbox" id="play_button"

name="play_button"/>

<img

src="img/muybridge12-hp-p.jpg"/>

</span>

<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>

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<div