<canvas id='draw-in-me' width='120' height="40"> <p>Powered By HTML5 canvas</p> </canvas> <script> window.οnlοad=draw; function draw(){ var canvas = document.getElementById('draw-in-me'); var ctx=canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(120.0,32.0); ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0); ctx.lineTo(8.0,40.0); ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0); ctx.lineTo(0.0,8.0); ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0); ctx.lineTo(112.0,0.0); ctx.bezierCurveTo(116.4,0.0,120.0,3.6,120.0,8.0); ctx.lineTo(120.0,32.0); ctx.closePath(); ctx.fill(); ctx.lineWidth = 2.0; ctx.strokesStyle = "rgb(255,255,255)"; ctx.stroke(); } </script>
HTML5的<canvas>元素,通过它可以动态创建和操作图形图像;
变量ctx引用的是画布的绘图空间(context).