線を描く（Canvas と SVG）

線を描く（Canvas と SVG）:

figure [basic] | CreateJS
figure [basic] | Snap.svg
figure [basic] | GraphicsJS

Canvas上に図形を描く「CreateJS」

SVGとして図形を描く「Snap.svg」と「GraphicsJS」

それぞれのライブラリで、

線の太さ1px, 2px の直線・二等辺三角形・長方形・円を描いてみた。

iPad で見ると、1px の直線でも、SVGは綺麗に表示されてた。

あと、テキストも SVG の方が綺麗かも。

[CreateJS]

var canvas = document.getElementById("canvas"); 
var stage = new createjs.Stage(canvas); 
 
//太さ1の直線 
var line1 = new createjs.Shape(); 
stage.addChild(line1); 
line1.x = 80; 
line1.y = 180; 
line1.graphics.setStrokeStyle(1); 
line1.graphics.beginStroke("#FFFFFF"); 
line1.graphics.moveTo(0, -60); 
line1.graphics.lineTo(0, 60); 
line1.graphics.endStroke(); 
//太さ2の直線 
var line2 = new createjs.Shape(); 
stage.addChild(line2); 
line2.x = 80; 
line2.y = 360; 
line2.graphics.setStrokeStyle(2); 
line2.graphics.beginStroke("#FFFFFF"); 
line2.graphics.moveTo(0, -60); 
line2.graphics.lineTo(0, 60); 
line2.graphics.endStroke(); 
//太さ1の二等辺三角形 
var triangle1 = new createjs.Shape(); 
stage.addChild(triangle1); 
triangle1.x = 240; 
triangle1.y = 180; 
triangle1.graphics.setStrokeStyle(1); 
triangle1.graphics.beginStroke("#FFFFFF"); 
triangle1.graphics.moveTo(0, -60); 
triangle1.graphics.lineTo(-60, 60); 
triangle1.graphics.lineTo(60, 60); 
triangle1.graphics.lineTo(0, -60); 
triangle1.graphics.endStroke(); 
//太さ2の二等辺三角形 
var triangle2 = new createjs.Shape(); 
stage.addChild(triangle2); 
triangle2.x = 240; 
triangle2.y = 360; 
triangle2.graphics.setStrokeStyle(2); 
triangle2.graphics.beginStroke("#FFFFFF"); 
triangle2.graphics.moveTo(0, -60); 
triangle2.graphics.lineTo(-60, 60); 
triangle2.graphics.lineTo(60, 60); 
triangle2.graphics.lineTo(0, -60); 
triangle2.graphics.endStroke(); 
//太さ1の長方形 
var rectangle1 = new createjs.Shape(); 
stage.addChild(rectangle1); 
rectangle1.x = 480; 
rectangle1.y = 180; 
rectangle1.graphics.setStrokeStyle(1); 
rectangle1.graphics.beginStroke("#FFFFFF"); 
rectangle1.graphics.drawRect(-80, -60, 160, 120); 
rectangle1.graphics.endStroke(); 
//太さ2の長方形 
var rectangle2 = new createjs.Shape(); 
stage.addChild(rectangle2); 
rectangle2.x = 480; 
rectangle2.y = 360; 
rectangle2.graphics.setStrokeStyle(2); 
rectangle2.graphics.beginStroke("#FFFFFF"); 
rectangle2.graphics.drawRect(-80, -60, 160, 120); 
rectangle2.graphics.endStroke(); 
//太さ1の円 
var circle1 = new createjs.Shape(); 
stage.addChild(circle1); 
circle1.x = 700; 
circle1.y = 180; 
circle1.graphics.setStrokeStyle(1); 
circle1.graphics.beginStroke("#FFFFFF"); 
circle1.graphics.drawCircle(0, 0, 60); 
circle1.graphics.endStroke(); 
//太さ2の円 
var circle2 = new createjs.Shape(); 
stage.addChild(circle2); 
circle2.x = 700; 
circle2.y = 360; 
circle2.graphics.setStrokeStyle(2); 
circle2.graphics.beginStroke("#FFFFFF"); 
circle2.graphics.drawCircle(0, 0, 60); 
circle2.graphics.endStroke(); 
//テキスト 
var label = new createjs.Text("figure [basic]", "24px Myriad Pro", "#FFFFFF"); 
stage.addChild(label); 
label.textAlign = "center"; 
label.textBaseline = "bottom"; 
label.x = canvas.width/2; 
label.y = 65; 
label.alpha = 0.6; 
 
stage.update(); 

[Snap.svg]

var canvas = Snap("#canvas"); 
var stage = Snap(800, 480); 
canvas.add(stage); 
 
//太さ1の直線 
var line1 = stage.line(80, 120, 80, 240).attr({stroke: "#FFFFFF", strokeWidth: 1}); 
//太さ2の直線 
var line2 = stage.line(80, 300, 80, 420).attr({stroke: "#FFFFFF", strokeWidth: 2}); 
//太さ1の二等辺三角形 
var triangle1 = stage.polygon(240, 120, 180, 240, 300, 240).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1}); 
//太さ2の二等辺三角形 
var triangle2 = stage.polygon(240, 300, 180, 420, 300, 420).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2}); 
//太さ1の長方形 
var rectangle1 = stage.rect(400, 120, 160, 120).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1}); 
//太さ2の長方形 
var rectangle2 = stage.rect(400, 300, 160, 120).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2}); 
//太さ1の円 
var circle1 = stage.circle(700, 180, 60).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1}); 
//太さ2の円 
var circle2 = stage.circle(700, 360, 60).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2}); 
//テキスト 
var label = stage.text(400, 59, "figure [basic]"); 
label.attr({fontSize: "24px", fill: "#FFFFFF", fontFamily: "Myriad Pro", opacity: 0.6, textAnchor: "middle"}); 

[GraphicsJS]

var stage = acgraph.create("canvas"); 
 
//太さ1の直線 
var line1 = stage.path().stroke("#FFFFFF", 1); 
line1.moveTo(80, 120).lineTo(80, 240).close(); 
//太さ2の直線 
var line2 = stage.path().stroke("#FFFFFF", 2); 
line2.moveTo(80, 300).lineTo(80, 420).close(); 
//太さ1の二等辺三角形 
var triangle1 = stage.path().stroke("#FFFFFF", 1); 
triangle1.moveTo(240, 120).lineTo(180, 240, 300, 240).close(); 
//太さ2の二等辺三角形 
var triangle2 = stage.path().stroke("#FFFFFF", 2); 
triangle2.moveTo(240, 300).lineTo(180, 420, 300, 420).close(); 
//太さ1の長方形 
var rectangle1 = stage.rect(400, 120, 160, 120).stroke("#FFFFFF", 1); 
//太さ2の長方形 
var rectangle2 = stage.rect(400, 300, 160, 120).stroke("#FFFFFF", 2); 
//太さ1の円 
var circle1 = stage.circle(700, 180, 60).stroke("#FFFFFF", 1); 
//太さ2の円 
var circle2 = stage.circle(700, 360, 60).stroke("#FFFFFF", 2); 
//テキスト 
var label = stage.text(200, 41, "figure [basic]", {width: "400px", fontSize: "24px", fontFamily: "Myriad Pro", color: "#FFFFFF", opacity: "0.6"}); 
label.hAlign("center");