projecthikky @ ウィキ
projecthikky @ ウィキ

HTML5 > Canvasで線の太さを変える

今日の課題： Canvasで線の太さを変える 



<!DOCTYPE html>
<html>
    <head>
        <title>HTML5の練習＠ヒッキープログラミングスレ</title>
        <style type="text/css">
            body { background-color: silver; }
            canvas { background-color: white; }
        </style>
    </head>
    <body>
        <h4>線の太さを変える</h4>
        <canvas id="mycanvas" width="640" height="480"></canvas>
        <script language="javascript" type="text/javascript">
 
            function mydraw() {
                var canvas = document.getElementById('mycanvas');
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.strokeStyle = 'red';
                ctx.lineWidth = 20;
                ctx.moveTo(100, 100);
                ctx.lineTo(200, 200);
                ctx.lineTo(200, 150);
                ctx.lineTo(250, 150);
                ctx.stroke();
            }
 
            mydraw();
 
        </script>
    </body>
</html>
 

  • lineWidth の値を変えれば線の太さを変えられる

タグ：

+ タグ編集
  • タグ：
タグの更新に失敗しました
エラーが発生しました。ページを更新してください。
ページを更新
「Canvasで線の太さを変える」をウィキ内検索
最終更新：2016年05月23日 05:45