HTML5 Canvas Рисование эллипса на канвасеНеобходимо рисовать эллипс на канвасе фиксированного размера. Если эллипс выходит за границы канваса, то необходимо, чтобы он шел по границе канваса. На скринах красной линией я показал, как примерно оно должно быть. Вывести закономерность между размеров, вводимым в поля "a" и "b", я так и не смог.
html-страничка:
<HTML>
<BODY>
<h1 align="middle">Построение эллипса</h1>
<p...https://www.cyberforum.ru/ javascript-canvas/ thread2624102.html
Реализуйте одностраничное Web-приложение для построения графика функции одной переменной, заданной пользователем HTML5 Canvas В общем очень нужно решение для задачи, я просто вообще не могу понять как ее можно сделать. Условие таково:
Реализуйте одностраничное Web-приложение для построения графика функции одной переменной, заданной пользователем. Пользователь вводит:
Определение функции с использованием синтаксиса Javascript,
Диапазон значений по оси абсцисс.
Интерфейс приложения должен включать в себя: поле для...
HTML5 Canvas Программа - paint на html, css и jshttps://www.cyberforum.ru/ javascript-canvas/ thread2621017.html Если я что-то нарисую на canvas, потом нажму клавишу s - save и r - replay, при попытке изменить фон он не будет изменятся, но при этом переменной back_color_canv будет присваиваться цвет. Для того чтоб поменять фон canva`са надо нажать на кнопку "изменить цвет фона" и выбрать цвет кликнув на цвет левее от кнопки.
Все записано в одном файле.
<!DOCTYPE html>
<html lang="en">
<head>...
HTML5 Canvas Выдает не точное значениеВ проекте задание, из backend вывести на frontend данные ускорения и расстояния. Код написан на рандомные числа, так как машина, с которой будут выводиться данные на экран, еще не готова. С кодом рандомных чисел, на экран выводится каждая вторая цифра ( в console.log выводится каждая цифра ). Если у кого было подобное, либо знает решение, напишите. Очень важно.
Добавлено через 48 секунд...https://www.cyberforum.ru/ javascript-canvas/ thread2618062.html
Какой максимальный размер canvas может быть? HTML5 Canvas Иными словами, какой сейчас у браузеров максимальный размер данных, передаваемых через toDataURL ?
Раньше во многих браузерах этот размер, вроде бы, ограничивался десятками килобайт.
HTML5 Canvas Способы защиты от вирусов в рисунках?https://www.cyberforum.ru/ javascript-canvas/ thread2615437.html Дело в том, что многие, если не все антивирусы обозначают как опасный даже файл с расширением txt, если он содержит нехороший код.
Как быть?
Добавлено через 1 минуту
А нехороший код можно достаточно легко записать в рисунок (например, в комментарии). Получается, любой рисунок, загруженный на сайт, может, потенциально, содержать нехороший код.
HTML5 Canvas Вызов drawImage() в отдельной функцииhttps://www.cyberforum.ru/ javascript-canvas/ thread2609997.html Доброго всем дня, в ходе изучения javascript, столкнулся с несколькими проблемами, а именно с отрисовкой изображения.
Суть вопроса такова: возможно ли вызвать drawImage() не в onload? Собственно, имею подобную часть html-страницы:
<canvas id="testCanvas" width="800" height="600" style="border:1px solid magenta;">
</canvas>
<div id="result"></div>
и скрипт располагаемый ниже:
var canvas...
Нужно построить график линейной функции в Canvas HTML5 Canvas У меня есть линейное уравнение по типу:
y=A*X + B
Например, y = 2*x + 4
Мне нужно отобразить его на холсте Canvas с любыми значениями A и B. Как мне нужно это реализовать? Подскажите пожалуйста, или скиньте какой-то сайт с этим примером
HTML5 Canvas Мне нужно добавить canvas элемент в блок <div> используя Javascript и начать его менятьhttps://www.cyberforum.ru/ javascript-canvas/ thread2602089.html Что я не делаю, выдаёт такую вот ошибку: Cannot read property 'getContext' of null, при том, что сам канвас создаётся внутри блока <div>
var scrolling = document.getElementById('scroll');
var canvas2= document.createElement("canvas");
canvas2.setAttribute("id", "canvas1");
scrolling.append(canvas2);
HTML5 Canvas Наложение текстуры в Three.js на фигуру Здравствуйте! У меня возникла проблема с наложением текстуры на 3d фигуру,помогите кто разбирается в этом, с three.js
работаю впервые, вот суть проблемы:
у меня есть текстура картинко в png формате, и еще отдельными файлами, отдельными файлами не получается подключить так как тестур много, больше 50, нужно подключить картинку, только на верхнюю часть персонажа (
на голову), вот только...
HTML5 Canvas Закрасить canvas по клику ЛКМЗдравствуйте всем :)
С javascript "на ты&qu
создать холст canvas с возможностью свободного рисования на нем "карандашом",
с возможностью полной отмены нарисованного (очисткой холста)
с возможностью отмены последнего действия (последней линии, нарисованной "карандашом").
Статус выполнения: выполнено частично. Создан холст, работает "карандаш", работает полная очистка холста. Не получается написать механизм отмены последнего действия ''карандаша", последней проведенной кривой.
Причина сбоя: не хватает данных из-за недостаточного личного опыта работы с canvas. Гугление ТОП-30 к явному ответу также не привело.
Запрос: помощь и/или совет по решению задачи отмены последнего действия "карандаша".
Плюс, ответ на этот вопрос заполнит в Сети информационный пробел для будущих разработчиков.
if(window.addEventListener){
window.addEventListener('load',function(){var canvas, context, tool;function init (){// Находим canvas элемент
canvas = document.getElementById('tablet');if(!canvas){
alert('Ошибка! Canvas элемент не найден!');return;}if(!canvas.getContext){
alert('Ошибка: canvas.getContext не существует!');return;}// Получаем 2D canvas context.
context = canvas.getContext('2d');if(!context){
alert('Ошибка: getContext! не существует');return;}
tool =new tool_pencil();
canvas.addEventListener('mousedown', ev_canvas,false);
canvas.addEventListener('mousemove', ev_canvas,false);
canvas.addEventListener('mouseup', ev_canvas,false);}// Очистка всего нарисованного на поле
document.getElementById('clear').addEventListener('click',function(){
context.clearRect(0,0, tablet.width, tablet.height);},false);// Здесь мы будем ловить движения мышиfunction tool_pencil (){var tool =this;this.started=false;this.mousedown=function(ev){
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started=true;};// Эта функция вызывается каждый раз, когда вы перемещаете мышь.// Но рисование происходит только когда вы удерживаете кнопку мыши// нажатой.this.mousemove=function(ev){if(tool.started){
context.lineTo(ev._x, ev._y);
context.stroke();}};// Событие при отпускании мышиthis.mouseup=function(ev){if(tool.started){
tool.mousemove(ev);
tool.started=false;}};}// Эта функция определяет позицию курсора относительно холстаfunction ev_canvas (ev){if(ev.layerX|| ev.layerX==0){// Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;}elseif(ev.offsetX|| ev.offsetX==0){// Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;}// Вызываем обработчик события toolvar func = tool[ev.type];if(func){
func(ev);}}
init();},false);}
И очевидный тег в HTML:
HTML5
1
2
<canvasid="tablet"width="1050"height="900"></canvas><buttonid="clear">Очистка всего холста</button>
<!doctype html><html><head><linkrel="stylesheet"type="text/css"media="all"href="css/reset.css"/><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]--><style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style><script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var brushSize=20;
var brushColor="#ff0000";
var points=[];
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
ctx.beginPath();
if(ctx.lineWidth!=brushSize){ctx.lineWidth=brushSize;}
if(ctx.strokeStyle!=brushColor){ctx.strokeStyle=brushColor;}
ctx.moveTo(mouseX,mouseY);
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"begin"});
lastX=mouseX;
lastY=mouseY;
isMouseDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"end"});
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
lastX=mouseX;
lastY=mouseY;
// command pattern stuff
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"draw"});
}
}
function redrawAll(){
if(points.length==0){return;}
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<points.length;i++){ var pt=points[i]; var begin=false; if(ctx.lineWidth!=pt.size){ ctx.lineWidth=pt.size; begin=true;} if(ctx.strokeStyle!=pt.color){ ctx.strokeStyle=pt.color; begin=true;} if(pt.mode=="begin" || begin){ ctx.beginPath(); ctx.moveTo(pt.x,pt.y);} ctx.lineTo(pt.x,pt.y); if(pt.mode=="end" || (i==points.length-1)){ ctx.stroke();}} ctx.stroke();} function undoLast(){ points.pop(); redrawAll();} ctx.lineJoin ="round"; ctx.fillStyle=brushColor; ctx.lineWidth=brushSize; $("#brush5").click(function(){ brushSize=5; }); $("#brush10").click(function(){ brushSize=10; });// Important! Brush colors must be defined in 6-digit hex format only $("#brushRed").click(function(){ brushColor="#ff0000"; }); $("#brushBlue").click(function(){ brushColor="#0000ff"; }); $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);});// hold down the undo button to erase the last line segment var interval; $("#undo").mousedown(function(){ interval = setInterval(undoLast, 100);}).mouseup(function(){ clearInterval(interval);});}); // end $(function(){});</script></head><body><p>Drag to draw. Use buttons to change lineWidth/color</p><canvasid="canvas"width=300height=300></canvas><br><buttonid="undo">Hold this button down to Undo</button><br><br><buttonid="brush5">5px Brush</button><buttonid="brush10">10px Brush</button><buttonid="brushRed">Red Brush</button><buttonid="brushBlue">Blue Brush</button></body></html>