質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

8062閲覧

CanvasのclearRect()で、初期化した部分が真っ白になってしまうのを避けたいです

ThanaMori

総合スコア12

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/03/30 06:54

CanvasのclearRect()で、初期化した部分が真っ白になってしまうのを避けたいです。

Canvasでレイヤーを重ねて描画するときのことです。
Canvas上での描画を効率化するために、layer2とlayer1を作りました。
先にソースコードを載せておきます。

HTML

1<div id="viewport"> 2 <canvas id="layer1"></canvas> 3 <canvas id="layer2"></canvas> 4</div>

CSS

1#viewport { 2 position: relative; 3} 4#viewport canvas { 5 position: absolute; 6} 7canvas { 8 background-color: transparent; 9} 10#layer1 { 11 z-index: 1; 12} 13#layer2 { 14 z-index: 0; 15}

JavaScript

1 2var width = 256; 3var height = 256; 4 5var Entity = (function() { 6 var Entity = function() { 7 this.x = null; 8 this.y = null; 9 this.prevX = null; 10 this.prevY = null; 11 this.width = null; 12 this.height = null; 13 }; 14 15 Entity.prototype.initialize = function(status) { 16 this.x = status.x; 17 this.y = status.y; 18 this.prevX = this.x; 19 this.prevY = this.y; 20 this.width = status.width; 21 this.height = status.height; 22 }; 23 24 Entity.prototype.render = function(context) { 25 context.clearRect( 26 this.prevX, this.prevY, 27 this.width, this.height 28 ); 29 context.fillStyle = '#1a1a1a'; 30 context.fillRect( 31 this.x, this.y, 32 this.width, this.height 33 ); 34 this.prevX = this.x; 35 this.prevY = this.y; 36 }; 37 38 return Entity; 39}()); 40 41var ent = new Entity(); 42ent.initialize({ 43 x: width/2, 44 y: height/2, 45 width: 50, 46 height: 50, 47}); 48 49var canvas = document.getElementById('layer1'); 50var ctx = canvas.getContext('2d'); 51canvas.width = width; 52canvas.height = height; 53 54var canvas2 = document.getElementById('layer2'); 55var ctx2 = canvas.getContext('2d'); 56canvas2.width = width; 57canvas2.height = height; 58ctx2.fillStyle = "blue"; 59ctx2.fillRect(0, 0, width, height); 60 61canvas.addEventListener('mousemove', function(e) { 62 e.preventDefault(); 63 ent.x = ~~e.clientX; 64 ent.y = ~~e.clientY; 65}, false); 66 67function renderLoop() { 68 ent.render(ctx); 69 requestAnimationFrame(renderLoop); 70}; 71 72renderLoop(); 73

layer1(上)layer2(下)

layer2を背景として青色にして、layer1に黒い四角形を描画させ、
layer1に描画した四角形をマウス操作で動かそうと思いました。
また、layer1の四角形の描画時に、全体をclearRectすると効率が悪くなるので、
layer1の移動前にいたところを初期化するようにしました。
するとent.renderのclearRectで初期化されてしまう部分が真っ白になってしまいます。

公式サイト(www.html5.jp)では、
「canvas 上の指定された矩形のすべてのピクセルを、透明な黒にクリアします。」
と書かれていたので、canvas本体を透明化すれば大丈夫だろうと思い、
canvas事態をcssを用いて透明化しましたが、もともといた場所の背景は白くなってしまいます。

もといた部分を青色で描画すればいいじゃないか、と思われるかもしれませんが、
それではlayerを分けた意味がないと思います。

この白くなってしまう部分をなくすには、どのようにしたらよいのでしょうか。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

var ctx2 = canvas.getContext('2d');

これ、canvas2.getContext('2d')の誤りですね。
だから下のLayerにfillRectしてるつもりでしてなかったという落ち。

投稿2016/03/30 08:27

編集2016/03/30 08:39
tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ThanaMori

2016/03/30 08:55

あー…完全に見落としていました。気を付けます。 大変ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問