Canvas 绘制直线

最新推荐文章于 2024-08-18 07:46:46 发布

Ping果狸

最新推荐文章于 2024-08-18 07:46:46 发布

阅读量2.1w

点赞数 1

分类专栏： canvas h5

本文链接：https://blog.csdn.net/Applechu_Lu/article/details/79101937

版权

本文介绍了Canvas如何绘制直线，强调了canvas基于状态的绘图特性，并通过示例讲述了如何绘制不同颜色的折线、封闭图形以及填充与描边的方法，同时提出了使用beginPath()和closePath()来优化图形绘制的问题。

摘要由CSDN通过智能技术生成

Canvas 绘制直线

1.canvas绘图是一种基于状态的绘图，绘图的过程应该是先设置绘图的状态，再调用具体的函数进行绘制。
例如绘制一条（100,100）到（700,700）的直线：

context.moveTo (100,100);       //设置起点状态
context.lineTo (700,700);       //设置末端状态
context.lineWidth = 5;          //设置线宽状态
context.strokeStyle = “#222” ;  //设置线的颜色状态
context.stroke();               //进行绘制

2.当我们要绘制两条有不同颜色的折线时:

    window.onload = function(){

        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext('2d');

        context.moveTo(100,200);
        context.lineTo(300