Zielony Smok

HTML5 canvas – tutorial

Rysowanie prostokąta

Użyty został skrypt figures.js.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"


Listing

var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var rectangle = new Rectangle(20, 20, 140,100);
rectangle.fillStyle = "red";
rectangle.strokeStyle = "blue";
rectangle.fill = true;
rectangle.stroke = true;
rectangle.lineWidth = 5;
rectangle.draw(ctx);
//-
var bary = rectangle.barycenter();
bary.shape="cross";
bary.diam = 8;
bary.fillStyle="black";
bary.stroke=true;
bary.draw(ctx);
//
var area = rectangle.area();
ctx.fillText("powierzchnia: " + area + " px", 200, 20);
var perimeter = rectangle.perimeter();
ctx.fillText("obwód: " + perimeter + " px", 200, 40);
var diagonal = rectangle.diagonal();
ctx.fillText("przekątna: " + diagonal + " px", 200, 60);
var rectangle1 = rectangle.deepclone();
rectangle1.points[0].y = 160;
rectangle1.points[1].y = 160;
rectangle1.points[2].y = 260;
rectangle1.points[3].y = 260;
rectangle1.draw(ctx);