HTML5-Canvas

HTML5-Canvas


 

<!DOCTYPE html>

<html class="no-js">



    <head>

        <meta charset="utf-8">

        <title>HTML5-Canvas</title>

        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>

    </head>



    <body>



        <canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">

            Your browser does not support the canvas element.

        </canvas>



        <script type="text/javascript">

            /*

             * 详细说明 :http://www.cnblogs.com/cotton/p/4403042.html

             */

            var c = document.getElementById("myCanvas");

            var cxt = c.getContext("2d");



            function line() {

                cxt.moveTo(10, 10);//为指定点创建了一个新的子路径,可以看成用来定位绘图鼠标用的(直线的起点,因为所有画线都和它相关,我们称之为上下文点)。

                cxt.lineTo(100, 50); //从鼠标定位点,到方法参数中指定的点之间画一条直线

                cxt.lineTo(10, 50);

                cxt.stroke();//为所画的线赋予颜色,并使其可见。如果没有特别的指定颜色的话,则默认使用黑色画直线。    

            }



            function arc() {

                cxt.fillStyle = "#FF0000";

                cxt.beginPath();//定义了一个新的路径绘制动作的开始

                cxt.arc(120, 20, 15, Math.PI, Math.PI * 2, true);//圆心坐标(x,y),半径,弧度起始点,结束点,画弧方向(true-顺时针,false-逆时针)

                cxt.closePath();

                cxt.fill();

            }



            function LinearGradient() {

                var grd = cxt.createLinearGradient(0, 0, 175, 50);//渐变路径的起始坐标和结束坐标(简单理解就是画了一条直线)

                grd.addColorStop(0, "#FF0000");//函数名字面意思是增加颜色停止点,就是把刚画的渐变路径定义为1,p是所在路径的位置(0-1之间),c则是渐变到p时候的颜色值。

                grd.addColorStop(1, "#00FF00");

                cxt.fillStyle = grd;

                cxt.fillRect(0, 55, 175, 50);

            }



            function drawImg() {

                var img = new Image()

                img.src = "http://w3school.com.cn/i/ct_html5_canvas_image.gif"

                cxt.drawImage(img, 0, 110);//图片及起始坐标

            }

        </script>



        <input type="button" value="直线" onclick="line()" />

        <input type="button" value="弧" onclick="arc()" />

        <input type="button" value="渐变" onclick="LinearGradient()" />

        <input type="button" value="图" onclick="drawImg()" />

    </body>



</html>

 


 

你可能感兴趣的:(canvas)