javascript код смайлика в canvas нарисованный ресурсами пользовательского устройства
Компьютеры / Программирование / javascript (джаваскрипт)
Тэги: javascript canvas смайлики
Тэги: javascript canvas смайлики
📅2-08-2018 👁683
Смайлик на странице можно показать через графический файл, можно нарисовать на php. Но можно нарисовать смайлик средствами клиента, чтобы не тратить ресурсы сервера. Нарисуем смайлик используя джаваскрипт, канвас и устройство пользователя (браузер компьютера или смартфона), которое этот смайлик сгенерит само. Наш сервер не будет принимать в этом участие!
код смайлика на js:
function smileIk() {
var canvas = document.createElement ("CANVAS");
var main = document.getElementsByTagName ("body")[0];
main.appendChild (canvas);
canvas.setAttribute ("id", "draw");
canvas.setAttribute ("width", "600");
canvas.setAttribute ("height", "600");
var context = canvas.getContext ("2d");
// ЛИЦО
context.beginPath();
context.arc(300, 300, 200, 0, degreesToRadians(360) , true);
context.fillStyle = "#ffffcc";
context.fill();
context.stroke();
// ПРАВЫЙ ГЛАЗ
context.beginPath() ;
context.arc (200,250, 25,0,degreesToRadians(360),true);
context.stroke() ;
// ЛЕВЫЙ ГЛАЗ
context.beginPath() ;
context.arc (400,250,25,0,degreesToRadians(360),true);
context.stroke();
// НОС
context.beginPath();
context.moveTo (300,300);
context.lineTo (300,350);
context.stroke();
// УЛЫБАЮЩИЙСЯ РОТ
context.beginPath() ;
context.arc(300, 350,75, degreesToRadians (35), degreesToRadians (150),false);
context.stroke();
}
function degreesToRadians(g){
return (g * Math.PI) / 180;
}
Оставить свой ответ: