canvas基础

 “canvas”学习笔记

 

---在html中必须设置width和height,如下所示。当浏览器不支持canvas时，就会显示文字部分。对于canvas的2D上下文，一般浏览器支持canvas元素的均支持2D，但是3D的WebGL只有部分浏览器支持。注意：canvas元素没有绘图功能，必须使用js代码绘图。

 

    <canvas id="myCanvas" width="300px" height="300px">这是一个画图区域</canvas>

    <script>

        var canvas = document.getElementById("myCanvas");//先获得canvas元素

        if(canvas.getContext){ //判断是否支持getContext属性

            var s = canvas.getContext("2d");  //获取2D上下文

            //代码块

        }

    </script>

 

直接在2D中可以绘制的形状：矩形。填充用fillStyle(),画轮廓用strokeStyle(),矩形的大小用fillRect()和strokeRect(),清除某个矩形clearRect().

示例1：画两个重叠的填充颜色红色的矩形。

 

    var canvas = document.getElementById('myCanvas');

    if(canvas.getContext){

        var s = canvas.getContext('2d');

        s.fillStyle = "red";

        s.fillRect(20,20,50,50);

        //s.fillStyle = "blue";   //无效

        s.fillStyle = "blue";

        s.fillRect(40,40,50,50);

        s.clearRect(50,50,10,10); //清除一部分矩形

    }

一定注意颜色填充要在fillRect()之前，默认为黑色，放在后面没有效果。

如果想变为轮廓样式，只需要设置strokeRect(),strokeStyle()即可。

绘制图形（始终和角度为例） 

画一个角度

 

    var s = canvas.getContext('2d');

        s.moveTo(100,100);

        s.lineTo(50,50);

        s.moveTo(100,100);

        s.lineTo(15,100);

        s.stroke();

 

画一个时钟。

    var canvas = document.getElementById('myCanvas');

    if(canvas.getContext){

        var s = canvas.getContext('2d');

        //外圆

        s.arc(100,100,99,0,2*Math.PI,false);

        //内圆

        s.moveTo(194,100);

        s.arc(100,100,94,0,2*Math.PI,false);

        //分针

        s.moveTo(100,100);

        s.lineTo(100,15);

        //时针

        s.moveTo(100,100);

        s.lineTo(35,100);

        s.font = "bold 14px Arial";  //写文字

        s.baseline = "middle";

        s.fillText("12",94,20);

        s.stroke();  //画轮廓

    }

重点理解的beginPath()和closePath()