時(shí)間：2023-07-20 21:48:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-20 21:48:02 來源：網(wǎng)站運(yùn)營
輕松學(xué)：網(wǎng)頁設(shè)計(jì)14- HTML5的拖放和畫布：HTML5的拖放和畫布
在線咨詢
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //設(shè)置允許將元素放置到其他元素中 } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); //設(shè)置被拖動(dòng)元素的數(shù)據(jù)類型和值 } function drop(ev) { //當(dāng)放置被拖動(dòng)元素時(shí)發(fā)生drop事件 ev.preventDefault(); //設(shè)置允許將元素放置到其他元素中 var data = ev.dataTransfer.getData("Text"); //從dataTransfer對(duì)象讀取被拖動(dòng)元素的數(shù)據(jù) ev.target.appendChild(document.getElementById(data)); } </script><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖放</title> <style type="text/css"> #div1 { /*目標(biāo)矩形的樣式*/ width: 300px; height: 130px; padding: 10px; border: 1px solid #aaaaaa; /*邊框?yàn)?px淺灰色實(shí)線邊框*/ } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //設(shè)置允許將元素放置到其他元素中 } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); //設(shè)置被拖動(dòng)元素的數(shù)據(jù)類型和值 } function drop(ev) { //當(dāng)放置被拖動(dòng)元素時(shí)發(fā)生drop事件 ev.preventDefault(); //設(shè)置允許將元素放置到其他元素中 var data = ev.dataTransfer.getData("Text"); //從dataTransfer對(duì)象讀取被拖動(dòng)元素的數(shù)據(jù) ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖動(dòng)一束玫瑰花圖片到矩形框中</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>繪制矩形-獲得畫布對(duì)象</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"); //獲取畫布對(duì)象 var cxt = c.getContext("2d"); //獲取畫布上繪圖的環(huán)境 cxt.fillStyle = "#ff0000"; //設(shè)置填充顏色 cxt.fillRect(10, 10, 150, 100); //繪制填充矩形 cxt.strokeStyle = "#0000ff"; //設(shè)置輪廓顏色 cxt.lineWidth = "5"; //設(shè)置輪廓線條寬度 cxt.strokeRect(100, 70, 260, 70); //繪制矩形輪廓 </script> </body></html>繪制填充的矩形和矩形輪廓，本例采用創(chuàng)建對(duì)象的第2種方法。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>繪制矩形-創(chuàng)建畫布對(duì)象</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>每單擊一次按鈕，將創(chuàng)建一個(gè)canvas元素，繪制一個(gè)黃色矩形</p> <script type="text/javascript"> function myFunction() { var x = document.createElement("CANVAS"); //創(chuàng)建canvas元素 var ctx = x.getContext("2d"); //獲取畫布上繪圖的環(huán)境 ctx.fillStyle = "orange"; //設(shè)置填充顏色 ctx.fillRect(20, 20, 150, 100); //繪制填充矩形 document.body.appendChild(x); //把創(chuàng)建的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"); //獲取畫布對(duì)象 var cxt = c.getContext("2d"); //獲取畫布上繪圖的環(huán)境 cxt.moveTo(10, 10); //定位繪圖起點(diǎn) cxt.strokeStyle = "#0000ff"; //設(shè)置線條顏色 cxt.lineWidth = "2"; //設(shè)置線條寬度 cxt.lineTo(150, 50); //第一條直線的終點(diǎn)坐標(biāo) cxt.lineTo(10, 50); //第二條直線的終點(diǎn)坐標(biāo) cxt.stroke(); //繪制當(dāng)前路徑的邊框 </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"); //獲取畫布對(duì)象 var cxt = c.getContext("2d"); //獲取畫布上繪圖的環(huán)境 cxt.fillStyle = "#ff0000"; //設(shè)置填充顏色 cxt.beginPath(); //初始化路徑 cxt.arc(60, 50, 20, 0, Math.PI * 2, true); //逆時(shí)針方向繪制填充的圓 cxt.closePath(); //封閉路徑 cxt.fill(); //填充路徑的內(nèi)部區(qū)域 cxt.beginPath(); //初始化路徑 cxt.arc(140, 40, 20, 0, Math.PI, true); //逆時(shí)針方向繪制填充的圓弧 cxt.closePath(); //封閉路徑 cxt.fill(); //填充路徑的內(nèi)部區(qū)域 cxt.beginPath(); //初始化路徑 cxt.arc(140, 60, 20, 0, Math.PI, false); //順時(shí)針繪制圓弧的輪廓 cxt.closePath(); //封閉路徑 cxt.stroke(); //繪制當(dāng)前路徑的邊框 </script> </body></html>關(guān)鍵詞：畫布,設(shè)計(jì)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
