Canvasについて語ろう
【環境】
OS:Linux ブラウザ:Chromium バージョン 57.0.2987.98
【コード】
<canvas id="canvasA" width="640" height="480">
キャンバスA
</canvas>
<script>
var context = document.getElementById('canvasA').getContext('2d');
var image1 = new Image();
image1.src = 'myphoto.png';
image1.onload = function(e){
context.drawImage(image1, 0, 0, 320, 240);
};
</script>
<canvas id="canvasB" width="640" height="480">
キャンバスB
</canvas>
<script>
var context = document.getElementById('canvasB').getContext('2d');
var image2 = new Image();
image2.src = 'myphoto.png';
image2.onload = function(e){
context.drawImage(image1, 0, 0, 640, 480);
};
</script>
とすると、キャンバスBのほうに画像が重なって表示されて
キャンバスAには表示されなくなっちゃうのです。
canvas要素のid名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか? >>321
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい >>322
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
HAVC1 商品をweb上でテキスト追加なんか編集できるライブラリってないかな?
多分Canvasだと思うんだがスキルなさすぎてわからん。 画像アップロードツールの使い方がいまいち解りません
このコードどこに貼ったらいいですか?
↓
var canvas = document.getElementsByClassName( "wPaint-canvas" );
var ctx = canvas[0].getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 250);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "data:image/png;base64,文字列・・・なんちゃらかんちゃら