H5 canvas画线

最新推荐文章于 2024-09-08 13:13:25 发布

CV伍六七

最新推荐文章于 2024-09-08 13:13:25 发布

阅读量1.1k

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/kellen_f/article/details/75570210

版权

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <title></title>
    </head>
<body>
    <canvas id="canvas1" width="8000" height="8000" style="border: solid;"></canvas>
</body>
<script>
    var can=document.getElementById("canvas1");
    var draw=can.getContext("2d");
    /*画一条直线*/   
    draw.moveTo(20,20);
    draw.lineTo(100,100);
    draw.stroke();
    draw.fillText("0，0到20,20的一条直线",50,50);
    /*直线的颜色设置*/
    draw.strokeStyle="red";
    draw.moveTo(20,20);
    draw.lineTo(20,100);
    draw.stroke();
    draw.fillText("设置了直线的颜色",20,80);
    /*线帽样式*/
    draw.strokeStyle="black";
    draw.lineCap="round";
    draw.moveTo(150,150);
    draw.lineTo(150,200);
    draw.stroke();
    /*线条画出闭合图形*/
    draw.beginPath();
    draw.lineWidth=2;
    draw.moveTo(250,250);
    draw.lineTo(250,300);
    draw.lineTo(225,225);
    draw.closePath();
    draw.stroke();
    draw.fillText("线条画出的闭合图形",225,225);
   //draw.fill();     该句可以让以上图形为填充;
   /*画矩形*/
    draw.fillRect(300,300,50,50);//填充的矩形,后两个参数为宽度高度，前面两个为左上的点坐标
    draw.strokeRect(400,400,50,50);//非填充的矩形
    draw.stroke();
  /*画弧线*/
     var d=Math.PI/360;
     draw.moveTo(80,200);
     draw.arc(30,200,50,0,360*d,true);
     draw.stroke();
     draw.fillText("圆弧",30,200);
     /*文本绘制*/
    draw.font="30px,Arial";
    draw.fillText("hello word",20,400);

    draw.font="bold,40px,Arial";
    draw.fillText("hello world",20,450);
    /*文本对齐方式在此不写代码了，textAlign:start,end,left,right，前者是阅读方向有关*/
    /*查看文本的宽度*/
    var text=draw.fillText("Hello world",40,500);
    var wid=draw.measureText("hellesad");
draw.fillText("这个文本的宽度是?..抱歉还没有实现怎么把变量在单文档里输出",40,550);    
</script>
</html>