<button onclick="start()" type="button">Start</button>
<button onclick="stop()">Stop</button>
<canvas width="300" height="300"></canvas>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const coord = { x: canvas.width / 2, y: canvas.height / 3 };
const length = canvas.width / 3;
const angleMax = 120;
const angleMin = 60;
let angleChange = 1;
let angle = 60;
let active = null;
function stop() {
active = false;
}
function start() {
active = true;
draw();
}
function draw() {
if (!active) {
return;
}
const { x, y } = coord;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(x, y);
const _a = angle * Math.PI / 180;
ctx.lineTo(x + length * Math.cos(_a), y + length * Math.sin(_a));
angle += angleChange;
if (angle === angleMin || angle === angleMax) {
angleChange *= -1;
}
ctx.stroke();
requestAnimationFrame(draw);
}
В Network указывается не jpeg, а text/html
mounted() {
const img = new Image();
img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
img.src = '...';
},
rectangle.drawRect(cur_x,cur_y,seg_size,seg_size);
rectangle.drawRect(0, 0, seg_size, seg_size);
rectangle.setTransform(cur_x, cur_y);
const cloud1 = new Image()
const cloud2 = new Image();
const cloud3 = new Image();
cloud1.src = 'http://i.imgur.com/GigS3KR.png';
cloud2.src = 'http://i.imgur.com/y3JAe69.png';
cloud3.src = 'http://i.imgur.com/v30JIWp.png';
const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;
for (const n of canvases) {
n.setAttribute('width', canvasSize);
n.setAttribute('height', canvasSize);
}
let ts0;
window.requestAnimationFrame(function draw(ts) {
for (const n of canvases) {
ts0 = ts0 || ts;
const dt = ts - ts0;
const ctx = n.getContext('2d');
ctx.clearRect(0, 0, canvasSize, canvasSize);
ctx.save();
ctx.translate(50, 50 + Math.sin(dt / 500) / 20);
ctx.rotate(Math.sin(dt / 340) / 200);
ctx.drawImage(cloud1, 0, 0, canvasSize * 0.95, canvasSize * 0.95);
ctx.restore();
ctx.save();
ctx.translate(5, 0 + Math.sin(dt / 382) * 2);
ctx.rotate(Math.sin(dt / 630) / 40);
ctx.drawImage(cloud2, 150, 100, canvasSize * 0.84, canvasSize * 0.84);
ctx.restore();
ctx.save();
ctx.translate(8, 150 + Math.sin(dt / 198) * 3);
ctx.rotate(Math.sin(dt / 500) / 450);
ctx.drawImage(cloud3, 0, 0, canvasSize * 0.7, canvasSize * 0.7);
ctx.restore();
}
window.requestAnimationFrame(draw);
});
const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';
(function draw() {
const ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(300, 200);
const time = new Date();
ctx.rotate(Math.sin(time / 500) / 10);
ctx.drawImage(cloud, -300, -200);
ctx.restore();
window.requestAnimationFrame(draw);
})();
<canvas width="400" height="400"></canvas>
const canvas = document.querySelector('canvas');
const w = canvas.width;
const h = canvas.height;
const ctx = canvas.getContext('2d');
ctx.translate(w / 2, h / 2);
ctx.fillStyle = 'red';
const steps = 30;
for (let i = 0; i < steps; i++) {
ctx.beginPath();
ctx.arc(w / 4, h / 4, 5, 0, 2 * Math.PI, false);
ctx.rotate(2 * Math.PI / steps);
ctx.fill();
ctx.closePath();
}
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let X, Y;
document.addEventListener('mousemove', function(e) {
X = e.clientX;
Y = e.clientY;
});
function drawRect(x, y, w, h) {
const dx = x + w / 2;
const dy = y + h / 2;
const angle = Math.atan2(X - dx, Y - dy);
ctx.save();
ctx.translate(dx, dy);
ctx.rotate(-angle);
ctx.translate(-dx, -dy);
ctx.strokeRect(x, y, w, h);
ctx.restore();
}
function draw() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
drawRect(50, 50, 50, 50);
requestAnimationFrame(draw);
}
draw();
Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas>
и как-то назначить этот canvas для вывода рендера three.js
<canvas ref="threejs"></canvas>
new THREE.WebGLRenderer({
canvas: this.$refs.threejs,
})