HTML5中canvas的lineTo和moveTo的用法

原创 2015年11月20日 10:54:55
<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>

运行效果如下:


版权声明:本文为博主原创文章,未经博主允许不得转载。

对Moveto 和Lineto的认识与感悟

   Moveto是设置起点坐标,Lineto是设置终点坐标,Lineto还有自动把上一点当作起点,所以设置起点只需设置一次,以后只需用Lineto便可以把各类不间断的曲线画出来。其实画各类图形和曲线...

MFC中的MoveTo和LineTo

//表示设置起点为(x1,y1),单纯的设置一个起点,并不画线 pDC->MoveTo(x1,y1); //由设置的起点到(x2,y2) pDc->LineTo(x2,y2); 注意: 1....

HTML5实现动画三种方式

HTML5实现动画三种方式 A-A+ 前端博客•2016-01-06•前端开发•canvas | CSS3 | HTML5 | jQuery•1748View0 文章目录...

怎么修改WordPress博客的文章字体的大小?

怎么修改WordPress博客的文章字体的大小? 例如标题是淘宝代购一件代发,我的博客的标题也是怎么打很大,如果标题长的话还会换行,我想把它改小点。 在网上一搜有以下回答“ 在你WordPres...
  • Koupoo
  • Koupoo
  • 2012年11月08日 21:13
  • 2095

Canvas改变原点绕中心旋转

Canvas改变原点绕中心旋转

html5的canvas绘制线条,moveTo和lineTo详解

今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和...
  • ly89cn
  • ly89cn
  • 2015年11月08日 15:23
  • 609

HTML5:canvas基本属性与用法介绍

  • 2012年01月29日 15:06
  • 1.14MB
  • 下载

html5之Canvas(基础用法,转换矩阵,图像混合)

终于到了这里,也是我回来看这些的初衷因为实在太6了,这个东东。 不了解为什么他很6的可以感受一下: http://codepen.io/dissimulate/pen/KrAwx(2d) http:/...

HTML5之CANVAS 用法示例汇总

Your browser does not support the canvas element. Your browser does not support the canvas element.Y...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5中canvas的lineTo和moveTo的用法
举报原因:
原因补充:

(最多只允许输入30个字)