Canvas

(5 оценок, среднее: 3,00 из 5)
Загрузка...

 

<canvas id="a" width="200" height="200"> </canvas>  
<script> 
var canv = document.getElementById("a"); 
var ctx = canv.getContext("2d"); 
ctx.fillRect(50, 25, 150, 100); 
</script>
 
Context – API для рисования 
2d – стандартно (система координат – top left) 
3d – не во всех браузерах (WebGL) 
Поддержка: IE 7+, FF 3+, Chrome 3+, Opera 10+

Методы рисования

ctx.fillStyle – стиль заполнения (цвет) 
ctx.strokeStyle – стиль росчерка (цвет) 
ctx.font – стиль шрифта ctx.strokeRect(x, y, width, height) 
ctx.fillRect(x, y, width, height) 
ctx.moveTo(x, y) – переместить перо в точку 
ctx.lineTo(x, y) – провести линию в точку 
ctx.stroke() - вывести линию с нужным стилем 
ctx.fillText("phrase", x, y) – вывод текста

Градиенты и изображения

grd = ctx.createLinearGradient(x0, y0, x1, y1); 
grd.addColorStop(0, "black"); 
grd.addColorStop(1, "white"); 
ctx.fillStyle = grd; 

img = Image(); 
img.src = "images/cat.jpg"; 
img.onload = function() { 
     ctx.drawImage(img, x, y, width, height); 
};