ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5 キャンバス描画 help_html/css_WEB-ITnose
HTML5 キャンバス描画 help_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:35:44960ブラウズ
<!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 コード
0583f58d9786e05a39f68209743461b5
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7パス683b85afec769a2dae32e320b747e360 ;
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
3f1c4e4b6b16bbbd69b2ee476dc4f83a
6c04bd5ca3fcae76e30b72ad730ca86d …
はい、ほぼわかりました。ありがとう、ヒーロー。しかし、どうすれば 2 つの腕の色を変更できますか?
HTML コード
< ; !doctype html>
49099650ebdc5f3125501fa170048923
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
cec63a5df7ce69634b0391c72f74e6d8c2caaf3fc160dd2513ce82f021917f8b
//棒人間を描画します ……
のメソッドをご覧ください。それ。 。私の記憶が正しければ、
HTML コード
0583f58d9786e05a39f68209743461b5
93f0f5c25f18dab9d176bd4f6de5d30e
5c63b0c9e2aeb7f2e73596ac1dc2ffb0 があります。 title>パスを描画6e916e0f7d1e588d4f442bf645aedb2f
6c04bd5ca3fcae76e30b72ad730ca86d
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var Canvas = document...
解決しました、ありがとうございます
1 階の回答からの引用:
HTML コード
aba7b36f87decd50b18c7e3e3c150106
f986225530aa480275718edf3800c486
5c63b0c9e2aeb7f2e73596ac1dc2ffb0
9c3bca370b5104690d9ef395f2c5f8d1
f6a6c8213bc6db7a1138593d5c59c92fc2caaf3fc160dd2513ce82f021917f8b
解決しました、ありがとう、今その属性が見つかりませんでした