代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta charset="UTF-8"> <title>Canvas畫圖</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ drawGrid(context, 'lightgray', 10, 10); context.strokeStyle = 'black'; }); </script> <style type="text/css"> #canvas{ margin: 0 auto; border: 1px solid #cccccc; box-shadow: #666666 0 0 15px; } #controls{ font-size: 16px; font-weight: bold; margin: 10px; } </style> </head> <body> <div id="controls"> 畫筆顏色: <select id="strokeStyleSelect"> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="orange">orange</option> </select> 座標線： <input type="checkbox" id="guidewireCheckbox" checked/> <input type="button" id="eraseAllButton" value="清空全部"> </div> <canvas id="canvas" width="1000px" height="700px"></canvas> <p id="expireTime"></p> <p id="callee_demo"></p></html><script type="text/javascript">var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');function drawGrid(context, color, stepx,stepy){ context.strokeStyle=color; context.lineWidth = 0.5; for(var i= stepx +0.5;i<context.canvas.width;i+=stepx){ context.beginPath(); context.moveTo(i,0); context.lineTo(i,context.canvas.height); context.stroke(); } for(i= stepy +0.5;i<context.canvas.height;i+=stepy){ context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); context.stroke(); }}// 橡皮筋畫圖模組var eraseAllButton = document.getElementById('eraseAllButton'), strokeStyleSelect = document.getElementById('strokeStyleSelect'), guidewireCheckbox = document.getElementById('guidewireCheckbox'), drawingSurfaceImageData, mousedown = {}, rubberbandRect = {}, dragging = false, guidewires = guidewireCheckbox.checked;function windowToCanvas(x, y){ var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.left * (canvas.width/bbox.width), y: y - bbox.top * (canvas.width/bbox.width) };}function saveDrawingSurface(){ drawingSurfaceImageData = context.getImageData(0, 0, canvas.width, canvas.height);}function restoreDrawingSurface(){ context.putImageData(drawingSurfaceImageData, 0 ,0);}// loc 是基於螢幕座標系下的滑鼠指標當前座標function updataRubberbandRect(loc){ rubberbandRect.width = Math.abs(loc.x - mousedown.x); rubberbandRect.height = Math.abs(loc.y - mousedown.y); if(loc.x>mousedown.x){ rubberbandRect.left = mousedown.x; } else{ rubberbandRect.left = loc.x; } if(loc.y>mousedown.y){ rubberbandRect.top = mousedown.y; } else{ rubberbandRect.top = loc.y; }}function drawRubberbandShape(loc){ context.beginPath(); context.lineWidth = 2.0; context.moveTo(mousedown.x, mousedown.y); context.lineTo(loc.x, loc.y); context.stroke();}function updateRubberband(loc){ updataRubberbandRect(loc); drawRubberbandShape(loc);}function drawHline(y){ context.beginPath(); context.moveTo(0, y+0.5); context.lineTo(canvas.width, y+0.5); context.stroke();}function drawVLine(x){ context.beginPath(); context.moveTo(x+0.5, 0); context.lineTo(x+0.5, canvas.height ); context.stroke(); }function drawGuidewires(x,y){ context.save(); context.strokeStyle = 'rgba(0,0,230,0.4)'; context.lineWidth = 1.0; drawVLine(x); drawHline(y); context.restore();}canvas.onmousedown = function(e){ var loc = windowToCanvas(e.clientX, e.clientY); e.preventDefault(); //saveDrawingSurface(); mousedown.x = loc.x; mousedown.y = loc.y; dragging = true;};canvas.onmousemove = function(e){ var loc; if (dragging) { e.preventDefault(); loc = windowToCanvas(e.clientX, e.clientY); //restoreDrawingSurface(); updateRubberband(loc); if (guidewires) { drawGuidewires(loc.x, loc.y); } }};canvas.onmouseup = function(e){ var loc = windowToCanvas(e.clientX, e.clientY); //restoreDrawingSurface(); updateRubberband(loc); dragging = false;};eraseAllButton.onclick = function(e){ context.clearRect(0, 0, canvas.width, canvas.height); drawGrid(context, 'lightgray', 10, 10); saveDrawingSurface();};strokeStyleSelect.onchange = function(e){ context.strokeStyle = strokeStyleSelect.value;};guidewireCheckbox.onchange = function(e){ guidewires = guidewireCheckbox.checked;};</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
