html5教程 (二)(canvas绘制简单的直线)

<!DOCTYPE html>

 

<html>

<head>

    <title>Html5_convas</title>

</head>

 

<body>

 

<canvas id="myConvas" width="200px" height="200" style="border:1px solid #ff0000"></canvas>

<script type="text/javascript">

    var elem = document.getElementById("myConvas");

    if (elem && elem.getContext) {

 

        var myContext = elem.getContext("2d");

        /*

        通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。

        颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla。

        通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。

        如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同:x, y, width, height。

        前两个参数设定 (x,y) 坐标,后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细

        */

        myContext.fillStyle = "#000FFF";

        myContext.strokeStyle = "#FF00F0";

        /*

        通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓,然后绘制         边框和填充。

        创建自定义形状很简单,使用 beginPath()开始绘制,然后使用直线、曲线         和其他图形绘制你的图形。

        绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用                closePath() 结束自定义图形绘制

        */

        myContext.beginPath();

        myContext.moveTo(10,10);

        //定义第一条直线的终点坐标,也即为第二条直线的起点坐标

        myContext.lineTo(60,90);

        myContext.lineTo(10,150);

        myContext.lineTo(10,10);

        //画圆

        //myContext.arc(90,89,45,50,Math.PI*2,true);

        //用fillStyle定义的颜色填充

        myContext.fill();

        myContext.stroke();

        

        myContext.closePath();

    }

</script>

</body>

 

</html>

 

你可能感兴趣的:(html5,canvas,直线,休闲,HTML5教程)