时间：2023-07-20 21:48:02 | 来源：网站运营
时间：2023-07-20 21:48:02 来源：网站运营
轻松学：网页设计14- HTML5的拖放和画布：HTML5的拖放和画布
在线咨询
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //设置允许将元素放置到其他元素中 } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); //设置被拖动元素的数据类型和值 } function drop(ev) { //当放置被拖动元素时发生drop事件 ev.preventDefault(); //设置允许将元素放置到其他元素中 var data = ev.dataTransfer.getData("Text"); //从dataTransfer对象读取被拖动元素的数据 ev.target.appendChild(document.getElementById(data)); } </script><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖放</title> <style type="text/css"> #div1 { /*目标矩形的样式*/ width: 300px; height: 130px; padding: 10px; border: 1px solid #aaaaaa; /*边框为1px浅灰色实线边框*/ } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //设置允许将元素放置到其他元素中 } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); //设置被拖动元素的数据类型和值 } function drop(ev) { //当放置被拖动元素时发生drop事件 ev.preventDefault(); //设置允许将元素放置到其他元素中 var data = ev.dataTransfer.getData("Text"); //从dataTransfer对象读取被拖动元素的数据 ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动一束玫瑰花图片到矩形框中</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="images/a_bouquet_of_roses.jpg" draggable="true" ondragstart="drag(event)" width="100" height="120"> </body></html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制矩形-获得画布对象</title> <style type="text/css"> canvas { border: 4px dotted orange; } </style> </head> <body> <canvas id="myCanvas" width="250" height="150"> 您的浏览器不支持 HTML5 canvas元素 </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); //获取画布对象 var cxt = c.getContext("2d"); //获取画布上绘图的环境 cxt.fillStyle = "#ff0000"; //设置填充颜色 cxt.fillRect(10, 10, 150, 100); //绘制填充矩形 cxt.strokeStyle = "#0000ff"; //设置轮廓颜色 cxt.lineWidth = "5"; //设置轮廓线条宽度 cxt.strokeRect(100, 70, 260, 70); //绘制矩形轮廓 </script> </body></html>绘制填充的矩形和矩形轮廓，本例采用创建对象的第2种方法。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制矩形-创建画布对象</title> <style type="text/css"> canvas { /*画布的样式*/ width: 200px; height: 120px; border: 2px solid red; margin: 10px; float: left; } </style> </head> <body> <button onclick="myFunction()">单击此按钮</button> <p>每单击一次按钮，将创建一个canvas元素，绘制一个黄色矩形</p> <script type="text/javascript"> function myFunction() { var x = document.createElement("CANVAS"); //创建canvas元素 var ctx = x.getContext("2d"); //获取画布上绘图的环境 ctx.fillStyle = "orange"; //设置填充颜色 ctx.fillRect(20, 20, 150, 100); //绘制填充矩形 document.body.appendChild(x); //把创建的canvas元素添加到body文档中 } </script> </body></html>2．绘制路径<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制直线</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持canvas元素. </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); //获取画布对象 var cxt = c.getContext("2d"); //获取画布上绘图的环境 cxt.moveTo(10, 10); //定位绘图起点 cxt.strokeStyle = "#0000ff"; //设置线条颜色 cxt.lineWidth = "2"; //设置线条宽度 cxt.lineTo(150, 50); //第一条直线的终点坐标 cxt.lineTo(10, 50); //第二条直线的终点坐标 cxt.stroke(); //绘制当前路径的边框 </script> </body></html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制圆弧和圆</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); //获取画布对象 var cxt = c.getContext("2d"); //获取画布上绘图的环境 cxt.fillStyle = "#ff0000"; //设置填充颜色 cxt.beginPath(); //初始化路径 cxt.arc(60, 50, 20, 0, Math.PI * 2, true); //逆时针方向绘制填充的圆 cxt.closePath(); //封闭路径 cxt.fill(); //填充路径的内部区域 cxt.beginPath(); //初始化路径 cxt.arc(140, 40, 20, 0, Math.PI, true); //逆时针方向绘制填充的圆弧 cxt.closePath(); //封闭路径 cxt.fill(); //填充路径的内部区域 cxt.beginPath(); //初始化路径 cxt.arc(140, 60, 20, 0, Math.PI, false); //顺时针绘制圆弧的轮廓 cxt.closePath(); //封闭路径 cxt.stroke(); //绘制当前路径的边框 </script> </body></html>关键词：画布,设计
