关闭

HTML5中canvas的lineTo和moveTo的用法

1715人阅读 评论(0) 收藏 举报
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.strokeStyle = "rgb(250,0,0)";
            context.fillStyle = "rgb(250,0,0)";
            context.lineTo(100, 0);//起点坐标
            context.lineTo(0,200);//下一个坐标,经过此时,就会绘制从坐标100,0到坐标0,200的一条线段
            context.lineTo(200,200);//从坐标0,200到坐标200,200的一条线段
            context.lineTo(100, 0);//从坐标200,200到坐标100,0的一条线段

            context.moveTo(400,400);//先保存一个坐标
            context.lineTo(500,500);//从moveTo提供的坐标绘制到500,500
            context.stroke();//通过此函数将以上绘制的图形绘制到画布上
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

运行效果如下:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:126512次
    • 积分:1775
    • 等级:
    • 排名:千里之外
    • 原创:78篇
    • 转载:36篇
    • 译文:0篇
    • 评论:13条
    最新评论