html 帆布学习笔记，帆布是基于状态绘制的！

Posted 2021-05-11

        window.onload = function () {
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 768;

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

                // 使用context绘制

                // canvas的绘图是一种基于状态的绘图，应该先设置绘图的状态，再来进行绘制
                context.moveTo(100, 100);
                context.lineTo(700, 100);
                context.lineTo(700, 700);
                context.lineTo(100, 700);
                context.lineTo(100, 100);

                context.lineWidth = 5;
                context.strokeStyle = 'rgb(200, 0, 0)';
                context.stroke();

                context.moveTo(200, 200);
                context.lineTo(600, 200);

                context.strokeStyle = 'rgb(0, 0, 0)';
                // canvas是基于状态绘图的，下面这个stroke调用的时候，上面的moveTo,lineTo,线宽,颜色等依然起作用.
                context.stroke();
            } else {
                alert("当前浏览器不支持Canvas，请更换浏览器后再试。");
            }
        }