ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML5 キャンバス描画 help_html/css_WEB-ITnose

HTML5 キャンバス描画 help_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:35:44
オリジナル
950 人が閲覧しました

<!doctype html><html lang="en"><head><meta charset=utf-8 /><title>绘制路径</title></head><body><canvas style=" background:#000;"></canvas><script>//绘制火柴人var canvas = document.querySelector('canvas'),	ctx = canvas.getContext('2d');//绘制头部ctx.beginPath();ctx.arc(100, 35, 25, 0, Math.PI*2, true);ctx.fillStyle = '#fff';ctx.fill();//绘制笑脸ctx.beginPath();ctx.strokeStyle = '#c00';ctx.lineWidth = 3;ctx.arc(100, 37, 15, 0, Math.PI, false);ctx.stroke();//绘制眼睛ctx.beginPath();ctx.fillStyle = '#c00';//绘制左眼ctx.arc(90, 30, 2, 0, Math.PI*2, true);ctx.fill();ctx.moveTo(113, 30);//绘制右眼ctx.arc(110, 30, 2, 0, Math.PI*2, true);ctx.fill();ctx.stroke();//绘制身体ctx.beginPath();ctx.fillStyle = '#fff';ctx.fillRect(98, 55, 3, 50);//绘制胳膊ctx.beginPath();//绘制左胳膊ctx.moveTo(70, 100);ctx.lineTo(100, 70);ctx.stroke();</script></body></html>
ログイン後にコピー


棒人間の頭と体を描きましたが、右腕を描く方法がまだ見つかりませんでした。腕を反転する方法を教えてください。ありがとうございます


ディスカッションへの返信 (解決策) )

rreee
こんな感じですか?

HTML コード



パス</ title> ; <br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br> <body> <br> <script> <br> <body> … <br> はい、ほぼわかりました。ありがとう、ヒーロー。しかし、どうすれば 2 つの腕の色を変更できますか? <br> <br> HTML コード <br> <br> < ; !doctype html> <br> <html lang="en"> </p> <meta charset=utf-8 /> <p class="sougouAnswer"> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br> <br> <body> <br> <canvas style="background:#000;"></canvas> <br> //棒人間を描画します …… <br> のメソッドをご覧ください。それ。 。私の記憶が正しければ、 <br> <br> HTML コード <br> <doctype html> <br> <head> <br> <meta charset=utf-8 /> があります。 title>パスを描画


<キャンバス スタイル="background:#000;">

解決しました、ありがとう、今その属性が見つかりませんでした

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート