html5总结

最新推荐文章于 2025-01-02 17:11:39 发布

strayyiyi

最新推荐文章于 2025-01-02 17:11:39 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/strayyiyi/article/details/79601845

（1）引入视频

</video>

（2）引入音频

（3）拖拽

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

（4）canvas

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

划线：

ctx.moveTo(10,10); ctx.lineTo(150,50); ctx.stroke()

圆形

ctx.fillStyle="#FF0000";

ctx.beginPath()

ctx.arc(70,80,15,0,Math.PI*2, true)

ctx.closePath()

ctx.fill()

渐变：

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

图像

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0)