沃梦达 / IT编程 / 前端开发 / 正文

Html5 之 Canvas

前端开发
2023-10-26

Html5 之 Canvas 标签:不支持提示相关接口://interface CanvasRenderingContext2D { readonly attribute HTMLCanvasElement canvas; void save(); void restore(); void scale(in double x, in dou...

   Html5 之 Canvas    


标签:

不支持提示

相关接口:
//
interface CanvasRenderingContext2D {
    readonly attribute HTMLCanvasElement canvas;

    void save();
    void restore();

    void scale(in double x, in double y);
    void rotate(in double angle);
    void translate(in double x, in double y);
    void transform(in double a, in double b, in double c, in double d, in double e, in double f);
    void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);

    attribute double globalAlpha;                 // (default 1.0)
    attribute DOMString globalCompositeOperation; // (default source-over)

    attribute any strokeStyle; // (default black)
    attribute any fillStyle;   // (default black)

    CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);
    CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
    CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
    CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
    CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

    attribute double lineWidth;   // (default 1)
    attribute DOMString lineCap;  // "butt", "round", "square" (default "butt")
    attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
    attribute double miterLimit;  // (default 10)

    attribute double shadowOffsetX;  // (default 0)
    attribute double shadowOffsetY;  // (default 0)
    attribute double shadowBlur;     // (default 0)
    attribute DOMString shadowColor; // (default transparent black)

    void clearRect(in double x, in double y, in double w, in double h);
    void fillRect(in double x, in double y, in double w, in double h);
    void strokeRect(in double x, in double y, in double w, in double h);

    void beginPath();
    void closePath();
    void moveTo(in double x, in double y);
    void lineTo(in double x, in double y);
    void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);
    void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
    void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);
    void rect(in double x, in double y, in double w, in double h);
    void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
    void fill();
    void stroke();
    void clip();
    boolean isPointInPath(in double x, in double y);

    boolean drawFocusRing(in Element element, in double xCaret, in double yCaret, in optional boolean canDrawCustom);

    attribute DOMString font;         // (default 10px sans-serif)
    attribute DOMString textAlign;    // "start", "end", "left", "right", "center" (default: "start")
    attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
    void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);
    void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);
    TextMetrics measureText(in DOMString text);

    void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);
    void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
    void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);
    void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
    void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
    void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

    ImageData createImageData(in double sw, in double sh);
    ImageData createImageData(in ImageData imagedata);
    ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
    void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
};

//
interface CanvasGradient {
    void addColorStop(in double offset, in DOMString color);
};

//
interface CanvasPattern {
    // opaque object
};

//
interface TextMetrics {
    readonly attribute double width;
};

//
interface ImageData {
    readonly attribute unsigned long width;
    readonly attribute unsigned long height;
    readonly attribute CanvasPixelArray data;
};

//
interface CanvasPixelArray {
    readonly attribute unsigned long length;
    getter octet (in unsigned long index);
    setter void (in unsigned long index, in octet value);
};

微软官方示例:

Rectangles: [双击代码可查看运行效果 - 用谷歌浏览器]


Arcs:


Quadratic:


Bezier:


Clipping:
 600) index = 0;
        index += 4;
        draw(index);
    }

    function draw(x) {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, 400, 500);

        ctx.save();
        ctx.beginPath();
        ctx.arc(x, x, 200, 0, Math.PI * 2, true);
        ctx.clip();

        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, 400, 500);

        drawSmiley();
        ctx.restore();
    }

    function drawSmiley() {
        ctx.lineWidth = 20;
        ctx.beginPath();
        ctx.moveTo(230, 130);
        ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(170, 130);
        ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(100, 230);
        ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(219, 298);
        ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
        ctx.stroke();
    }" _ue_custom_node_="true">

fillStyle:
= 25 && i = 50 && i = 75 && i

strokeStyle:
= 25 && i = 50 && i = 75 && i

Gradients:


Patterns:


lineWidth:
 0; i--) {
        ctx.strokeStyle = "black";
        ctx.lineWidth = i;
        ctx.beginPath();
        ctx.moveTo(55, 20 + (20 - i) * 24);
        ctx.lineTo(335, 20 + (20 - i) * 24);
        ctx.stroke();
    }" _ue_custom_node_="true">

lineCap:


lineJoin:


Shadows:


Text:


Image:


Video:


Rotate:


Scale:


setTransform:


Stroke transform:


Animation:


Mouse:
 50) {
            count = 0;
            r = Math.floor(Math.random() * 255) + 70;
            g = Math.floor(Math.random() * 255) + 70;
            b = Math.floor(Math.random() * 255) + 70;
        }
        lastX = currentX;
        lastY = currentY;
    }" _ue_custom_node_="true">

火狐官方示例

moveTo example:


lineTo example:


arc example:
 1) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }
    }" _ue_custom_node_="true">

quadraticCurveTo example:


globalAlpha example:


linearGradient example:


createRadialGradient example:


createPattern example:


shadowed text example:


save and restore canvas state example:


translate example:
 20000) break;
            var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
            var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
            ctx.lineTo(x2, y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R - O && y2 != 0);
        ctx.stroke();
    }" _ue_custom_node_="true">

rotate example:


scale example:
 20000) break;
            var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
            var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
            ctx.lineTo(x2, y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R - O && y2 != 0);
        ctx.stroke();
    }" _ue_custom_node_="true">

setTransform examples:


clip example:


谷歌的例子

arc:


clearpath:


gradient:


gradient2:


linewidth:


overflow:


quadraticcurve:


resizing:


saverestorepath:


stroke-scale-rotate:


stroke-should-not-close-path:


example1:
 cvs.width || this.x  cvs.height || this.y

本文标题为：Html5 之 Canvas

上一篇： 用html代码给网页加个live2d看板娘吧
下一篇： 2.(for循环)计算1+3+5+...+99的和(html)
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2