Проверяем принадлежность точки многоугольнику.
В роли точки выступают координаты мыши.
При нажатии ЛКМ по пустому месту на экране (канве) ничего не происходит.
При нажатии ЛКМ по многоугольнику производится обводка контуром данного многоугольник и пауза анимации.
При повторном нажатии на ЛКМ контур исчезает и анимация возобновляется.
<canvas id="cvs" width="175" height="175"></canvas>
// инициализация канваса var canvas = document.getElementById('cvs'); var ctx = canvas.getContext('2d'); var x = 0; var y = 300; var tick_count = 0; var flag = 0; // 0 - летит вверх var sprite = new Image(); sprite.src = 'http://grafika.me/files/bird_sprite.png'; // наше изображение // событие с функцией инициализации sprite.onload = function() { tick(); requestAnimationFrame(tick); } // функция для анимации циклических алгоритмов function tick() {
// инициализация канваса var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); // координаты х, у и радиус function hexagon(x, y, r) { ctx.save(); ctx.translate(x, y); var angle = 0; // угол многоугольника — 60 градусов // рассчитывается по формуле п/3 for(var i = 0; i < 6; i ++) { ctx.lineTo(Math.cos(angle) * r, Math.sin(angle) * r); angle += Math.PI / 3; } ctx.closePath(); ctx.restore(); } // устанавливаем радиус 50 var radius = 50; // насколько далеко мы хотим разместить каждую строку
var ctx = document.getElementById("paintbox").getContext('2d'); var x = []; var y = []; var x1=[]; var y1=[]; function Hermit(t){ //функция для построения многочлена var k; k=(t-x[0])/(x[1]-x[0]); return (1-3*k*k+2*k*k*k)*y[0]+(3*k*k-2*k*k*k)*y[1]+(x[1]-x[0])*((k-2*k*k+k*k*k)*y[2]+(-k*k+k*k*k)*y[3]); } function compareNumeric(a, b) { //необходимо для сортировки if (a > b) return 1; if (a == b) return 0; if (a < b) return -1; } function start() {
<canvas id="canvas" width="1500" height="800"></canvas><br/> <input type="checkbox" id="Points">Points<br /> <input type="checkbox" id="Line">Line<br /> <input type="button" onclick="update()" value="Update"> <script type="text/javascript"> var coords = []; var k=0; var plot = function(x, y, c) { // ”становить пиксель в т. (x, y) с прозрачностью c if(isFinite(x) && isFinite(y)){ var color = { r: plot.color.r, g: plot.color.g, b: plot.color.b, a: plot.color.a*c };
// x = (1 + cos(t)) * cos(t) // y = (1 + cos(t)) * sin(t) // t принадлежит промежутку [0; 2п] var t, x, y, nX, nY, oldX, oldqY; let scl, DX, DY, Rotate; var canvas = document.getElementById('cvs'); var ctx = canvas.getContext('2d'); // отрисовка графика function Init() { scl = Number(document.getElementById('scale').value); // масштаб DX = Number(document.getElementById('shiftX').value); // сдвиг по х DY = Number(document.getElementById('shiftY').value); // сдвиг по у Rotate = Number(document.getElementById('rotate').value); // наклон
<canvas width="500" height="500">Не поддерживается:С</canvas><br> СдвигX: <input id="moveX" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoX"></b><br> СдвигY: <input id="moveY" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoY"></b><br> СдвигZ: <input id="moveZ" type="range" min="-50" max="50" value="10" step="0.01" oninput="update()"><b id="infoZ"></b><br> ПоворотX: <input id="rotateX" type="range" min="-3.1415" max="3.1415" value="0" step = "0.0001" oninput="update()"><b id="infoRotateX"></b><br>
<canvas width="500" height="500"></canvas>
let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d"); ctx.fillStyle = "yellow"; ctx.strokeStyle = "yellow"; class Vector{ constructor(x, y){ this.x = x || 0; this.y = y || 0; } add(vector){ //Сложить два вектора this.x += vector.x; this.y += vector.y; } getMagnitude(){ //Получить длину вектора return Math.sqrt(this.x * this.x + this.y * this.y); } getAngle(){ //Получить угол вектора return Math.atan2(this.y,this.x); }
<script> /* Управление мышью: - удерживание ЛКМ + перемещение для перетаскивания - вращение колесика для масштабирования - удерживание ПКМ + вращение колесика для вращения */ // Инициализация переменных и добавление обработчика событий для события contextmenu, чтобы предотвратить появление контекстного меню по нажатию ПКМ document.getElementById('viewport').addEventListener('contextmenu', mouseDown); let scale = 50, angle = 1, startX, startY, xOffset = 0, yOffset = 0, xPos = 0, yPos = 0, dragging = false, rightMouseButtonPressed = false;
<html> <head> <meta charset="UTF-8"/> <title>lab 2</title> <script src="script.js"></script> </head> <body onload="Init()"> <canvas id="paint" width="503" height="503"></canvas> <br/> <input type="range" id="scale" min="1" max="15" value="8" oninput = "Init()"> Масштаб <br/> <input type="range" id="distX" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по x <br/> <input type="range" id="distY" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по y <br/>