<script> var ctx, canvas; var xc1, xc2, xc3; var yc1, yc2, yc3; var iter; //анимирующая функция, реализуемая для всех браузеров window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame })(); //функция, запускающаяся при загрузке станицы window.onload = function() {
<canvas id="canv" width="500" height="500" style="border: 1px solid black"></canvas> <script> let ctx = document.getElementById('canv').getContext('2d'); let tn = Math.tan(Math.PI / 3), // тангенс и косинус угла в 60 градусов cs = Math.cos(Math.PI / 3); let x = [], y = [], tmpx = [], tmpy = []; // массивы, в которых хранятся координаты точек пересечения внутренних линий со сторонами треугольника // трегольник
<canvas id="canvas" width="500" height="500" style="border: 1px solid black" onclick="storeGuess(event)"></canvas> <script> let ctx = document.getElementById('canvas').getContext('2d'); // отрисовка фона ctx.beginPath (); ctx.fillStyle = "blue"; ctx.fillRect (0, 0, 500, 300); ctx.fillStyle = "green"; ctx.fillRect (0, 300, 500, 500); ctx.stroke (); let score = 0; // переменная, хранящая кол-во попаданий в быка
Построение функции, проходящей через заданные точки, с помощью полинома Ньютона. Функция строится при добавлении новой точки с помощью клика.
При нажатии на кнопку "Нарисовать" строится функция, проходящая через точки, заданные кликом мыши.
<html> <head> <meta charset="UTF-8"/> <title>Определение точки пересечения отрезков</title> <script src="main.js"></script> </head> <body > <canvas id="paint" width="503" height="503"></canvas> </body> </html>
var ctx; var idA; var x,y; let points1 = []; var A,B,C; var pointxx,pointyy; window.onload=function(){ //по нажатию левой кнопки мыши ставятся точки document.getElementById('paint').addEventListener('click', (e) => { if(points1.length < 4) points1.push({x: e.offsetX, y: e.offsetY}); Init(); });
<canvas id="canvas" width="500" height="500"></canvas> <!-- VERTEX SHADER --> <script type="shader" id="Vshader"> attribute vec2 vertexPosition; //атрибут вершин void main(){ gl_Position = vec4(vertexPosition, 0.0, 1.0);//строим вершинный шейдер } </script> <!-- FRAGMENT SHADER --> <script type="shader" id="Fshader"> precision mediump float; //устанавливаем точность для чисел с плавающей точкой uniform float u_time; //униформ переменная времени //функция генерации случайных чисел
<html> <head> <meta charset="utf-8"> </head> <body> <canvas id='tutorial' width='500' height='500'></canvas> <script> var vertices = []; var vertices1 = []; var a = []; var context, imData, em; const Point3D = function (x, y, z) { this.x = x; this.y = y; this.z = z; }; function Pixel(col) { imgData = em.createImageData(1, 1); imgData.data[0] = col.r; imgData.data[1] = col.g; imgData.data[2] = col.b; imgData.data[3] = col.a; } function Grafic() { // big pyramid
Введите количество разбиений [1; 6]
<canvas height="600" width='600' id='cnvs'></canvas><br /> <p1> Введите количество разбиений [1; 6] </p1> <br /> <br /> <input type="number" id="iterationCnt" min="1" max="6" value="1" /> <br /> <br /> <input type="button" onclick="draw()" value="Старт"> </canvas> <script> var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d"); var Point = function(x, y) // Конструктор для точки { this.x = x; this.y= y; } function drawLine(a, b) // Рисование линии { ctx.moveTo(a.x, a.y);
var f=0; //переключатель состояний var a=150,b=150; // параметры сжатия по оси Х и У var c=100; // координата У центра мячика, а координата Х не изменяется var ctx; //наш конвас var ImgData //тут храним слепок фона)для быстрой отрисовки. ctx = document.getElementById('paintbox').getContext('2d'); function bg(){ //рисуем фон ctx.fillStyle="#008000"; for(var i=0;i<500;i+=20){ for(var j=0;j<500;j+=20){ ctx.beginPath(); ctx.fillRect(i,j,15,15); ctx.closePath(); ctx.fill();