イナヅマTVログ

Canvas始めました – 枠線だけの矩形を描く

| 0件のコメント

塗りが無い枠だけの矩形を描くの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.strokeStyle = '#333333';
context.strokeRect(10, 10, 290, 240);

strokeRect
x position:int, y position:int, width:int, height:int

Option
JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.lineWidth = 10;
context.lineJoin = 'round';
context.strokeStyle = 'rgb(51, 51, 51)';
//context.strokeStyle = 'rgba(51, 51, 51, 0.5)';
context.strokeRect(10, 10, 290, 240);

lineWidth(property):int

lineJoin(property):String
round, bevel, miter

*strokeRectで描かれる線はpathでは無い

コメントを残す

必須欄は * がついています