CANVASにdrawRectでハート型を描画したいと思っています。
色々検索してみましたが、ハート型のサンプル等がなく困っています。
ハートを描画するコードやサンプルが載っているURL等教えていただけないでしょうか。
よろしくお願いします。
drawRectそのものは長方形を描く命令なので使えないとおもいます。drawRoundrectでもむずかしいとおもいます。
ハート型はみつけました。
http://jsdo.it/debiru/q47m わりあいにキレイに書けているとおもいます。
http://www.smashious.com/an-introduction-to-html5-canvas/473/ ちょっとみみがとんがってる。ベジェ曲線で描いたようです。
http://blog.ganeshzone.net/index.php/2010/12/drawing-a-simple-shape-with-the-html5-canvas/ エラが出てる
====
http://wonderfl.net/c/ca6d/read
204行からハートを書いているようですが、Flashでした
No.1の方が回答しているように、drawRect()は長方形を描く命令なのでハード型は描けません。
ベジエ曲線を描くbezierCurveTo()を使えばできます。
以下のコードを試してみてください。
<canvas id="canvas4" width="140" height="140"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas4"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); </script>
jsのコードでしたので、drawpathで描画してみましたが形が歪になってしまいました・・・
ただ、考え方は大変参考になりました。
ありがとうございます。
今更になって気が付いた。
CANVAS って言ってたのは、java の android.graphics.Canvas のことを言ってたのか。
面白そうなんで、ぼくも参戦。
式は、こちらに書いてあるものを使いました。
http://stackoverflow.com/questions/14325779/draw-heart-shape-android-canvas?rq=1
ちょっと分かりにくいので、そこに書いてある wolframalpha.com へのリンクがこちら。
http://www.wolframalpha.com/input/?i=polar%20r=%28sin%28t%29*sqrt%28abs%28cos%28t%29%29%29%29/%28sin%28t%29%20%2b%207/5%29%20-2*sin%28t%29%20%2b%202
jsFiddle で試してみたのが、こちらです。
http://jsfiddle.net/a_kuma3/FtuCj/embedded/result/
どうでしょ。
結構、きれいに描けていると思いますけど ;-)
ソースは、こっちの方が見やすいです。
http://jsfiddle.net/a_kuma3/FtuCj/
式が極座標の式だったので、θを刻んでループで回して、極座標を直交座標に変換して、canvas のサイズに直して、各点を直線で結んでます。
んで、最後に塗りつぶし、という感じです。
<style type='text/css'> #canvas-h { border: 5px inset pink; background: #fff; } </style> <script type='text/javascript'> window.onload=function() { /* http://stackoverflow.com/questions/14325779/draw-heart-shape-android-canvas?rq=1 */ function heart_function(t) { var r = (Math.sin(t)*Math.sqrt(Math.abs(Math.cos(t))))/(Math.sin(t) + 7.0/5.0) -2*Math.sin(t) + 2.0; return r; } CoordSupport = function() { this.init = function(cw, ch, x_min, x_max, y_min, y_max) { this.width_ = cw; this.height_ = ch; this.x_min_ = x_min; this.x_max_ = x_max; this.y_min_ = y_min; this.y_max_ = y_max; this.dx_ = (x_max - x_min) / cw; this.dy_ = (y_max - y_min) / ch; }; this.pixel = function(x, y) { var px = (x - this.x_min_) / (this.x_max_ - this.x_min_) * this.width_; var py = (this.y_max_ - y) / (this.y_max_ - this.y_min_) * this.height_; return {"x": px, "y": py}; }; }; function draw_heart() { var canvas = document.getElementById('canvas-h'); if (!canvas || !canvas.getContext) { alert("not support CANVAS !"); return false; } var cs = new CoordSupport(); cs.init(300, 350, -3, 3, -5, 2); canvas.width = cs.width_; canvas.height = cs.height_; var ctx = canvas.getContext('2d'); ctx.strokeStyle = "pink"; ctx.beginPath(); var p = cs.pixel(0, 0); ctx.moveTo(p.x, p.y); var PI2 = Math.PI * 2.0; var dt = PI2 / 360; for (t = 0 ; t <= PI2 ; t += dt) { var r = heart_function(t); var x = r * Math.cos(t); var y = r * Math.sin(t); p = cs.pixel(x, y); ctx.lineTo(p.x, p.y); } ctx.stroke(); ctx.fillStyle = "pink" ctx.fill(); ctx.closePath(); } draw_heart(); } </script> <canvas id="canvas-h"></canvas>
こっちも見られないでしょうか?
http://jsfiddle.net/a_kuma3/FtuCj/show/
IEだと、IE8以前では、そもそも canvas に対応してないので見られません。
数式は難しくても、プログラムには、そのまま書くだけなんで。
ぼくも、何であの形になるのかは、さっぱり ┐(´-`)┌
ちょっと長いですけど、ソースも貼っときました。
描画の考え方としては、英語のサイトになりますがこちらが有用になると思います。
http://www.zzzxo.com/q/answers-android-how-to-draw-triangle-star-square-heart-on-the-canvas-7007429.html
描画にはandroid.graphics.Canvasの仕様上、ハート曲線の数式が必要になりますが、ハート曲線は簡単なものから難しいものまで数多く開発されてきましたので、こちらで気に入った曲線を探し出し、androidに導入のが都合がいいと思います。
http://www.mathematische-basteleien.de/heart.htm
どの曲線を使用するのかわからないため、コードの記載は行いませんが、どのハートが気に入ったのかを教えてくださればコードでの回答を行います。
回答ありがとうございます。
ハートの計算がなかなかうまくいかずに困っていました^^;
本当は丸投げになってしまいますのでよろしくないと思いますが、今回はよろしくお願いします。
ちなみにMETHOD1になります。
こんなのがあった。
2013/05/29 00:01:37http://d.hatena.ne.jp/Zellij/20111205/p1
http://homepage3.nifty.com/kuebiko/science/freestdy/MthHeart.htm
http://www16.ocn.ne.jp/~akiko-y/heart/index_heart.html
回答ありがとうございます。
2013/05/29 20:52:27おっしゃる通りdrawrectは四角形でした^^;
結局描けませんでしたが参考になりました。
ありがとうございます。