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. 射线渐变

Html游戏开发-画图

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);
上一篇:【BZOJ4568】幸运数字(线性基,树链剖分,ST表)


下一篇:BZOJ4568 [Scoi2016]幸运数字 【点分治 + 线性基】