html5-Canvas绘制线条

function draw(){
        VAR canvas = document.getElementById("canvas");
        var cxi = canvas.getContext("2d");
       
        cxi.fillStyle = "rgb(200,0,0)";
       
        cxi.beginPath();
        cxi.moveTo(75,50);
        cxi.lineto(100,85);
        cxi.lineTo(100,20);
        cxi.fill();    
    } body onLoad="draw(); ">

canvas id="canvas" width="150" height="150"> /canvas> br>

/body>

 
cxi.beginPath(); 初始化路径绘制；cxi.moveTo(75,50); 将路径的“起始点”坐标确定；cxi.lineTo(100,85); 将另一个“结点”坐标确定；cxi.lineTo(100,20); 将另二个“结点”坐标确定; （这里的结点可以理解成PhotoShop里面的路径工具点出来的，结点）cxi.fill(); 将绘制的“起始点"、“第一个结点”、“第二个结点”; 一共三个点用直连结起来。形成一个三角形；如下图：

三角形左边的一个点是：cxi.moveTo(75,50)；

三角形上边的一个点是：cxi.lineTo(100,20);

三角形下边的一个点是：cxi.lineTo(100,85);

这里的参数坐标，都是相对于canvas元素的坐标0.0.即左上角;

function draw(){
        var canvas = document.getElementById("canvas");
        var cxi = canvas.getContext("2d");
       
        cxi.fillStyle = "rgb(200,0,0)";
       
        cxi.beginPath();
        cxi.moveTo(75,50);
        cxi.lineTo(100,85);
        cxi.lineTo(100,20);
        cxi.fill();    
    } body onLoad="draw(); ">

canvas id="canvas" width="150" height="150"> /canvas> br>

/body>

 
cxi.beginPath(); 初始化路径绘制；cxi.moveTo(75,50); 将路径的“起始点”坐标确定；cxi.lineTo(100,85); 将另一个“结点”坐标确定；cxi.lineTo(100,20); 将另二个“结点”坐标确定; （这里的结点可以理解成PhotoShop里面的路径工具点出来的，结点）cxi.fill(); 将绘制的“起始点"、“第一个结点”、“第二个结点”; 一共三个点用直连结起来。形成一个三角形；如下图：

三角形左边的一个点是：cxi.moveTo(75,50)；

三角形上边的一个点是：cxi.lineTo(100,20);

三角形下边的一个点是：cxi.lineTo(100,85);

这里的参数坐标，都是相对于canvas元素的坐标0.0.即左上角;

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！