javascript код смайлика в canvas нарисованный ресурсами пользовательского устройства

Смайлик на странице можно показать через графический файл, можно нарисовать на 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;
}

 

 



Оставить свой ответ:

Имя:*
E-Mail:
Вопрос:
Skolko buдет пять пдюс сeмь?
Ответ:*
QQpedia21.ru - cамые интересные вопросы