Почему метод scale используется до того как чтото нарисовать?
ctx.save(); // я вот тут не понимаю, зачем сохранять "ничего"(наверное правильнее говрить "пустой холст" но я в этом не уверен)?
ctx.restore();// и зачем это "ничего" восстанавливать?А после восстанавливает их.
Почему нельзя объект, например четырехугольник или круг, сохранить в переменную чтобы легче было с ним обращатся?
<script type="text/javascript">function drawSquare(id, w, h, d) {
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#0011aa";
context.fillStyle = "rgba(0, 0, 150, 0.5)";
var dh = d/2;
var wh = d/2;
context.beginPath();
context.moveTo(0, d);
context.lineTo(w,d);
context.lineTo(w,d+h);
context.lineTo(0,d+h);
context.lineTo(0,d);
context.moveTo(0, d);
context.lineTo(wh,dh);
context.lineTo(wh+w,dh);
context.lineTo(w, d);
context.lineTo(0, d);
context.moveTo(wh+w,dh);
context.lineTo(w,d);
context.lineTo(w,d+h);
context.lineTo(wh+w,dh+h);
context.lineTo(wh+w,dh);
context.stroke();
context.closePath();
context.fill();
}</script>Я хочу, чтобы после этого значения выводился символ "%", но с меньшим font-siz'ом. Как бы это реализовать?
ctx.font = 'bold 24px sans-serif';
if (cell == 1) {
ctx.fillStyle = 'red'
} else if (cell == 2) {
ctx.fillStyle = 'green'
} else {
ctx.fillStyle = 'white' // устанавливается белый, пишется белым
}. ctx.font = "36px serif"
+ ctx.fillStyle = "black"
- ctx.strokeStyle = "black"
ctx.fillText("Hello world", 100, 100)const updateSquares = (axis, step, max) => {
clearRect();
const minAxis = `min${axis.toUpperCase()}`;
const maxValue = max - 12;
squares.forEach((square) => {
square[minAxis] = (maxValue + square[minAxis] + step) % maxValue;
});
updateRect(squares);
}
function moveRect(event) {
switch (event.keyCode) {
// left
case 37:
updateSquares('x', -25, WIDTH);
break
// up
case 38:
updateSquares('y', -25, HEIGHT);
break
// right
case 39:
updateSquares('x', 25, WIDTH);
break
// down
case 40:
updateSquares('y', 25, HEIGHT);
break
default:
break
}
}