html5 canvas
html5 canvas
<p>绘图</p> <!-- html5绘图 --> <canvas id="myCanvas" width="600" height="400" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas> <div id="xycoordinates"></div> <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
javascript html5
<script type="text/javascript"> window.onload = function () { var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#00edfc"; cxt.fillRect(0, 0, 600, 300); var c = document.getElementById("myCanvas"); var cxt_leon = c.getContext("2d"); cxt_leon.fillStyle = '#666666'; cxt_leon.font = 'bold 30px 楷体'; cxt_leon.textBaseline = 'top'; cxt_leon.fillText('Leon Line', 0, 0); var cxt = c.getContext("2d"); cxt.fillStyle = '#00f'; // blue cxt.strokeStyle = '#999999'; // red cxt.lineWidth = 1; cxt.shadowOffsetX = 5; cxt.shadowOffsetY = 5; cxt.shadowBlur = 4; cxt.shadowColor = 'rgba(255, 0, 0, 0.5)'; cxt.fillStyle = '#00f'; cxt.moveTo(10, 10); cxt.lineTo(10, 250); var cxt1 = c.getContext("2d"); cxt1.moveTo(10, 250); cxt1.lineTo(550, 250); var cxt2 = c.getContext("2d"); cxt2.moveTo(15, 230); cxt2.lineTo(20, 230); cxt2.font = 'normal 12px 宋体'; cxt2.strokeText('230', 20, 230); var cxt3 = c.getContext("2d"); cxt3.moveTo(15, 250); cxt3.lineTo(80, 220); cxt3.font = 'normal 12px 宋体'; cxt3.strokeText('280', 80, 220); cxt3.font = 'normal 12px 宋体'; cxt3.strokeText('220', 80, 220); var cxt4 = c.getContext("2d"); cxt4.moveTo(80, 220); cxt4.lineTo(140, 210); cxt4.font = 'normal 12px 宋体'; cxt4.strokeText('210', 140, 210); var cxt5 = c.getContext("2d"); cxt5.moveTo(140, 210); cxt5.lineTo(220, 240); cxt5.font = 'normal 12px 宋体'; cxt5.strokeText('240', 220, 240); cxt.stroke(); var c = document.getElementById("myCanvas1"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(70, 18, 15, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); var c = document.getElementById("myCanvas2"); var cxt = c.getContext("2d"); var grd = cxt.createLinearGradient(0, 0, 175, 50); grd.addColorStop(0, "#FF0000"); grd.addColorStop(1, "#00FF00"); cxt.fillStyle = grd; cxt.fillRect(0, 0, 400, 10); var c = document.getElementById("myCanvas3"); var cxt = c.getContext("2d"); var img = new Image() img.src = "html5/1.jpg" cxt.drawImage(img, 0, 0); } function cnvs_getCoordinates(e) { x = e.clientX; y = e.clientY; document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML = ""; } </script>