Html游戏开发-画图

1. 画矩形和写字

var canvas = document.getElementById(\'canvas\'),
    context = canvas.getContext(\'2d\');

context.lineWidth = 30;

context.font = \'24px Helvetica\';
context.fillText(\'Click anywhere to erase\', 175, 40);

context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

// 鼠标按下时清除整个画布
context.canvas.onmousedown = function (e) {
   context.clearRect(0, 0, canvas.width, canvas.height);
};

2. 射线渐变

var canvas = document.getElementById(\'canvas\'),
    context = canvas.getContext(\'2d\'),
    gradient = context.createRadialGradient(
                 canvas.width/2, canvas.height, 10,
                 canvas.width/2, 0, 100);

gradient.addColorStop(0, \'blue\');
gradient.addColorStop(0.25, \'white\');
gradient.addColorStop(0.5, \'purple\');
gradient.addColorStop(0.75, \'red\');
gradient.addColorStop(1, \'yellow\');

context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();

 

3. 居中文字

function drawText() {
context.fillStyle = \'blue\';
context.strokeStyle = \'yellow\';
context.fillText(text, canvas.width/2, canvas.height/2);
context.strokeText(text, canvas.width/2, canvas.height/2);
}
context.textAlign = \'center\';
context.textBaseline = \'middle\';

 

4. 图片

var canvas = document.getElementById(\'canvas\'),
context = canvas.getContext(\'2d\'),
image = new Image();
image.src = \'fence.png\';
image.onload = function(e) {
    context.drawImage(image, 0, 0);
};

 

5. 画布中的画布

var canvas = document.getElementById(\'canvas\'),
context = canvas.getContext(\'2d\'),
scaleWidth = ..., // Calculate scales for width and height
scaleHeight = ...;
...
context.drawImage(canvas, 0, 0, scaleWidth, scaleHeight);