Знакомство холст

холст

холст тег представляет собой графический контейнер, должен быть нарисован с помощью языка сценариев.

Набор ширина и высота:

ширина и высота холста могут быть предусмотрена по сценарию, он может быть предусмотрен через ярлык.

1 устанавливает скрипт: canvas.width: 100; convas.height: 100;

Этикетка набор 2: <холст ширина = "100" высота = "100"> </ холст>

Набор среды рисования:

Общий ContextID там 2d, 3d, WebGL и так далее. Общие 2d и WebGL

вар CTX = canvas.getContext ( "2d");

Для того, чтобы установить фон холст:

ctx.fillStyle = "RGBA (0,0,0,0.3)";

Смещение устанавливается:

 ctx.translate (100100);

размер и положение настройки холста:

ctx.fillRect (х, у, ширина, высота);

Установить Прозрачность:

ctx.globalAlpha = 0,5;

Установите цвет линии границы: цвет прямоугольника, который можно сделать до работы

ctx.strokeStyle = «красный»;

Набор ширина линии:

ctx.lineWidth = 5;

Установка прямоугольных ребер:

ctx.strokeRect (х, у, ширина, высота)

Заполнение полотна:

ctx.fill ();

Заполнение картины:

не ctx.createPattern (e.targert, "нет повтора");

Нарисуйте красный квадрат

вар холст, CTX;
        холст = document.querySelector ( "холст" );
        CTX = canvas.getContext ( "2D" );
         // нарисовать цвет фона 
        ctx.fillStyle = "RGBA (0,0,0,0.3)" ;
        ctx.fillRect ( 0, 0, 400, 300 );
         // нарисовать красный квадрат 
        ctx.fillStyle = "RGBA (255,0,0,1)" ;
         // нарисовать прямоугольник размером 100 × 100 координат 50,50 
        ctx.fillRect (50, 50, 100, 100);

Эффект:

Очистить прямоугольный:

После очистки будет оставлен пустым

        ctx.clearRect (50,50,100,100);

Нарисуйте круг:

        вар холст, CTX;
        холст = document.querySelector ( "холст" );
        CTX = canvas.getContext ( "2d" );
        вар заполнения = ctx.createRadialGradient (50,50,80,50,50,0 );
        fill.addColorStop ( 0, "красный" );
        fill.addColorStop ( 0,5, "RGBA (255,255,0,1)" );
        ctx.fillStyle = заполнения;
        // 偏移 
        ctx.translate (100100 );
        ctx.fillRect ( 0,0,100,100);

Заполнение картины: createPattern

вар холст, CTX;
        холст = document.querySelector ( "холст" );
        CTX = canvas.getContext ( "2d" );
        заливка ();
        Функция заливки () {
             вар IMG = новое изображение ();
            img.src = "../img/34-.jpg" ;
            img.addEventListener("load",loadHandler);
        }
        function loadHandler(e){
            var fill = ctx.createPattern(e.target,"no-repeat");
            ctx.fillStyle = fill;
            //缩放图片
            ctx.scale(0.4,0.4);
            ctx.fillRect(0,0,1024,717);
        }

给红色方块绘制阴影：

// 绘制阴影
        var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        function fills(){
            ctx.fillStyle = "red";
            ctx.shadowOffsetX = 4;
            ctx.shadowOffsetY = 4;            
            ctx.shadowBlur = 4;
            ctx.shadowColor = "#666666";
            ctx.fillRect(50,50,100,100);
        }
        fills();

 

绘制边线，设置边线粗细

var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        function fills(){
            ctx.strokeStyle = "red";
            ctx.lineWidth = 5;
            ctx.strokeRect(50,50,100,100);
        }
        fills();