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

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

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

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

JavaScript

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

Q&A

解決済

2回答

2650閲覧

canvasの塗りつぶしが聞かない

Kaede0902

総合スコア32

canvas

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

JavaScript

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

0グッド

0クリップ

投稿2018/09/12 07:41

編集2018/09/12 09:02

黒背景が適用できていない

イメージ説明

黒背景に、こういう二円ができるはずなんですが、そのとうりに書いても

![イメージ説明]

黒背景が適用できません、どうして四角くぬりつぶせないんでしょうか?

こちらがコードになります

よろしくお願いします

javascript

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>clipping</title> 6 <style>* { padding: 0; margin: 0; } 7 canvas { background: rgb(149, 220, 241); } 8 </style> 9 10</head> 11<body> 12 <canvas id="myCanvas" width="2000" height="1000"></canvas> 13<script> 14 var canvas = document.getElementById("myCanvas"); 15 var ctx = canvas.getContext("2d"); 16 ctx.lineWidth = "20"; 17 ctx.flllStyle = "black"; 18 ctx.fillRect = (20, 20, 400,400); 19 ctx.save(); 20 ctx.beginPath(); 21 22 ctx.rect(0, 0, 100, 100); 23 ctx.clip(); 24 // outer red circle. 25 ctx.beginPath(); 26 ctx.strokeStyle = "red"; 27 ctx.arc(200, 200, 200, 0, (Math.PI/180)* 360, false); 28 ctx.stroke(); 29 30 ctx.restore(); 31 ctx.beginPath(); 32 ctx.rect(0, 0, 1000, 1000); 33 ctx.clip(); 34 35 ctx.beginPath(); 36 ctx.strokeStyle = "blue"; 37 ctx.arc(200, 200, 100, 0, (Math.PI/180) * 360, false); 38 ctx.stroke(); 39</script> 40</body> 41</html>

回答ありがとうございました!!こちらがやりたかったことです!!
イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

ところどころ間違えているようです。なお、この座標だとcanvasの一部しか塗りません。

JavaScript

1 //ctx.flllStyle = "black"; 2 //ctx.fillRect = (20, 20, 400,400); 3 ctx.fillStyle = "black"; // spelling. 4 ctx.fillRect(20, 20, 400, 400); // method.

投稿2018/09/12 07:53

x_x

総合スコア13749

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

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

Kaede0902

2018/09/12 09:00

メソッドになってませんでした!!ありがとうございます!!!
guest

0

<style> canvas { background: rgb(149, 220, 241); } </style>

この個所で黒 rgb(0, 0, 0) でなく水色 rgb(149, 220, 241) を指定しているからだと思います.

投稿2018/09/12 07:53

IKIX

総合スコア142

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

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

Kaede0902

2018/09/12 09:01

ごめんなさい一分だけ黒くしたかったんです! 画像追加しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問