<canvas id = "canvas" width = "500" height = "500"></canvas><br> <div> <select id = "select"> <option value = "0"> Heart 1 </option> <option value = "1"> Heart 2 </option> <option value = "2"> Star </option> <option value = "3"> Square </option> <option value = "4"> Arrow </option> </select> <button onclick = "init()"> Select </button> </div> <script> /***** Canvas *****/ let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d");
<canvas height="1000" width='1000' id='cnvs'></canvas><br /> <input type="button" onclick="draw()" value="Пуск"> <script> var ctx, imgData, canvas; var color = {r: 54, g: 163, b: 116 , a: 255}; // цвет папоротника canvas = document.getElementById("cnvs"); ctx = canvas.getContext("2d"); function setPixel (x,y,c) // устанавливает пиксель с координатой (x, y) с цветом c { var index = 4*(x + canvas.width*y); imgData.data[index + 0]=c.r; imgData.data[index + 1]=c.g; imgData.data[index + 2]=c.b; imgData.data[index + 3]=c.a;
<html> <head> <meta charset="UTF-8"/> <title>lab 5</title> <script src="script2.js"></script> </head> <body> <canvas id="paint" width="500" height="500"></canvas> <br/> <input type="button" value="Старт" onclick="Start()"> <input type="button" value="Стоп" onclick="Stop()"> </body> </html> <style> body { background-color: #FDEAA8; } </style>
var ctx; var idA;
Тест на попадание точки внутрь многоугольника. При нажатии на корпус самолета (серую часть) появляются pepe, летящие вниз.
let offset = -100; let bgColor = '#14142d'; let bombsFlag = false; window.addEventListener('load', start); document.getElementById('viewport').addEventListener('click', (e) => { // Обработка нажатий на canvas let pol = [ // Массив вершин многоугольника, внутрь которого может попасть точка, нужен для передачи в функцию проверки. {x: 305 - offset, y: 243}, {x: 320 - offset, y: 235},
Построение параметрического графика функций, на примере "Спирали", с возможностью поворота, масштабирования, сдвига графика или плоскости.
Проверяем принадлежность точки многоугольнику.
В роли точки выступают координаты мыши.
При нажатии ЛКМ по пустому месту на экране (канве) ничего не происходит.
При нажатии ЛКМ по многоугольнику производится обводка контуром данного многоугольник и пауза анимации.
При повторном нажатии на ЛКМ контур исчезает и анимация возобновляется.
<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 };