0

私はこの小さなJavaScriptキャンバススニペットを持っています：

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 10; // or whatever
            var fillColor = '#ff0000';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 200, 200, '#ddd');

})();

idこれで、のdivを取得し、その中にcanvas小さなHTML5を作成しますcanvas。ここで、ユーザーは基本的にマウスで描画できます。さて、それは素晴らしいことです...しかし、キャンバス内に何を保存する必要がある場合はどうなりcanvas.toDataURL()ますか？私の知る限り、私はキャンバスを取り、canvas.toDataURL()それを画像に保存するために行う必要があります。しかし-それはIDが必要ですか？SOOOO関数でキャンバスを作成したとき、それに付随するものcreateCanvasをどのように作成すればよいので、次のようなことができますか？iddocument.getElementById("idofcanvas").toDataURL()

よろしくお願いします！:)

4

1 に答える 1

2

しかし-それはIDが必要ですか？

IDは必要ありませんが、IDが問題になることはありません（実際に一意である限り;-)）。ここでは、DOM要素を選択するための任意のメソッドが機能します。ページにキャンバスが1つしかない場合は、次のようになります。

var canvas = document.getElementsByTagName('canvas')[0];
var imageData = canvas.toDataURL();

createCanvas関数でキャンバスを作成したとき、それに付随するIDを作成するにはどうすればよいですか？

返す前に、canvas要素のIDプロパティを設定するだけです。この値が一意であることを確認する必要があることを忘れないでください。

function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.node.id = /* some unique value here */;
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
}
于 2013-02-26T18:33:13.140 に答える