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>