Canvas入门02-绘制直线

主要使用的API有：

context.moveTo(x,y) 声明线的起始坐标
context.lineTo(x,y) 声明线的下一个坐标
context.fillStyle 声明线的填充颜色
context.fill() 填充
context.strokeStyle 声明线的颜色
context.stroke() 绘制直线
context.beginPath() 声明线的开始
context.closePath() 声明线的结束

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

        canvas.width = 1024;

        canvas.height = 768;

        if (canvas.getContext('2d')) {

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

            console.log(context); // CanvasRenderingContext2D

            // 使用contex进行绘制

            // draw a line

            context.moveTo(100, 100); // 声明起点，坐标轴是以canvas的左上角为原点

            context.lineTo(700, 700); // 声明终点

            context.lineTo(100, 700);

            context.lineTo(100, 100);            

            context.fillStyle = 'rgb(2, 100, 30)';

            context.fill(); // 填充

            context.lineWidth = 5; // 声明线的宽度

            context.strokeStyle = "red"; // 声明线的颜色

            context.stroke(); // 绘制直线

            // draw a another line

            context.moveTo(200, 100);

            context.lineTo(700, 600);

            context.strokeStyle = 'black'; // 线条颜色会覆盖之前声明的颜色

            context.stroke();

        } else {

            alert('当前浏览器不支持Canvas，请更换浏览器后再试');

        }

结果：

先设置了线的颜色为红色，再设置线的颜色为黑色，但是最后结果，画出来都是黑色的。这是为什么呢？

因为canvas 绘图是基于状态的，下面设置的颜色状态会覆盖上面的设置状态。

那么如何才能画不同颜色的线呢？

要在每一个单独的path前后，使用 context.beginPath() 和 context.closePath()。

        // draw a line

       context.beginPath();

       context.moveTo(100, 100); // 声明起点，坐标轴是以canvas的左上角为原点

       context.lineTo(700, 700); // 声明终点

       context.lineTo(100, 700);

       context.lineTo(100, 100);

       context.closePath();

       context.fillStyle = 'rgb(2, 100, 30)';

       context.fill(); // 填充

       context.lineWidth = 5; // 声明线的宽度

       context.strokeStyle = "red"; // 声明线的颜色

       context.stroke(); // 绘制直线

       // draw a another line

       context.beginPath();

       context.moveTo(200, 100);

       context.lineTo(700, 600);

       context.closePath();

       context.strokeStyle = 'black'; // 线条颜色会覆盖之前声明的颜色

       context.stroke();

结果：

巴特西

Canvas入门02-绘制直线

最新文章

热门文章