オフスクリーンレンダリングキャンバスの基本的な例を作成しようとしていますが、jsのエラー "コンテキストのプロパティを読み取れません"。実際に私のアイデアは、私が見たようなデモを作成することですhttps://yalantis.com/私は自分の名前の頭文字を作成したいと思います。これを達成するための良いアイデアがあれば、私に教えてください。ここおかげで、実際の実装前に、私の基本的な試み:)オフスクリーンキャンバスを正しくレンダリングする方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Off Screen Canvas</title> 
<script> 
    function createOffscreenCanvas() { 
     var offScreenCanvas= document.createElement('canvas'); 
     offScreenCanvas.width= '1360px'; 
     offScreenCanvas.height= '400px'; 
     var context= offScreenCanvas.getContext("2d"); 
     context.fillRect(10,10,200,200); 
    } 
    function copyToOnScreen(offScreenCanvas) { 
     var onScreenContext=document.getElementById('onScreen').getContext('2d'); 
     var offScreenContext=offScreenCanvas.getContext('2d'); 
     var image=offScreenCanvas.getImageData(10,10,200,200); 
     onScreenContext.putImageData(image,0,0); 
    } 
    function main() { 
     copyToOnScreen(createOffscreenCanvas()); 
    } 
</script> 
<style> 
    #onScreen { 
     width:1360px; 
     height: 400px; 
    } 
</style> 
</head> 
<body onload="main()"> 
<canvas id="onScreen"></canvas> 
</body> 
</html>

2017-04-12 Anonymous

...

function createOffscreenCanvas() { 
 
    var offScreenCanvas = document.createElement('canvas'); 
 
    offScreenCanvas.width = '1360'; 
 
    offScreenCanvas.height = '400'; 
 
    var context = offScreenCanvas.getContext("2d"); 
 
    context.fillStyle = 'orange'; //set fill color 
 
    context.fillRect(10, 10, 200, 200); 
 
    return offScreenCanvas; //return canvas element 
 
} 
 

 
function copyToOnScreen(offScreenCanvas) { 
 
    var onScreenContext = document.getElementById('onScreen').getContext('2d'); 
 
    onScreenContext.drawImage(offScreenCanvas, 0, 0); 
 
} 
 

 
function main() { 
 
    copyToOnScreen(createOffscreenCanvas()); 
 
}

canvas { 
 
    border: 1px solid black; 
 
}

<body onload="main()"> 
 
<canvas id="onScreen" width="1360" height="400"></canvas>

注：キャンバスの幅と高さ使用してCSSを設定することはありません。代わりに、キャンバスのネイティブのwidthとheightプロパティを使用します。

出典

2017-04-12 12:53:22

ねえ、ありがとう！ :)それはうまく動作しています。 yalantisの言及された例を描くのは正しい方法でしょうか、どのように矩形の色を変更し、矩形内の粒子を塗りつぶすことができますか？ –

これを達成するには複数の方法があります。これはその一つです。最高か悪いかではなく、仕事をします。あなたはあなたに快適に感じるものと一緒に行かなければなりません。 yalantisの言及例はより複雑です。これはちょうど始まりです –

'createOffscreenCanvas'関数で色を変更するために四角形を描画する前にfillStyleを設定することができます。編集した回答を確認 –

はあなたの関数createOffscreenCanvas

function createOffscreenCanvas() { 
    var offScreenCanvas= document.createElement('canvas'); 
    offScreenCanvas.width= '1360px'; 
    offScreenCanvas.height= '400px'; 
    var context= offScreenCanvas.getContext("2d"); 
    context.fillRect(10,10,200,200); 
    return offScreenCanvas; 
}

編集

にあなたがキャンバスないコンテキストから画像の日付を取得した戻りoffScreenCanvasです。あなたは、次の方法でこれを達成できる

function copyToOnScreen(offScreenCanvas) { 
    var onScreenContext=document.getElementById('onScreen').getContext('2d'); 
    var offScreenContext = offScreenCanvas.getContext('2d'); 
    var image=offScreenContext.getImageData(10,10,200,200); 
    onScreenContext.putImageData(image,0,0); 
}

出典

2017-04-12 12:39:51 Oen44

第1のエラーを取り除きましたが、getImageDataにエラーがありました –

fillStyleを置くべき場所を色を変更する方法を教えてください。 –

オフスクリーンキャンバスを正しくレンダリングする方法

答えて

編集

関連する問題