|
|
@@ -1,122 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
- <title>Document</title>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <canvas id='draw2' width='400' height='400' ></canvas>
|
|
|
- <script>
|
|
|
-
|
|
|
-
|
|
|
- // ctx.fillStyle='red'
|
|
|
- // ctx.fillRect(0,0,350,300)
|
|
|
- // var c=document.getElementById("сanvas");
|
|
|
- // c.onclick=function(evt){
|
|
|
- // console.log(evt)
|
|
|
- // }
|
|
|
- // c.onmousemove=function(evt){
|
|
|
- // console.log(evt)
|
|
|
- // }
|
|
|
- // var ctx=c.getContext('2d')
|
|
|
- // ctx.beginPath();
|
|
|
- // ctx.arc(100,75,50,0,2*Math.PI);
|
|
|
- // ctx.stroke();
|
|
|
-
|
|
|
- var c=document.getElementById("draw2");
|
|
|
- var ctx=c.getContext("2d");
|
|
|
- // c.onclick=function(event){
|
|
|
-
|
|
|
-
|
|
|
- // console.log(event)
|
|
|
- // };
|
|
|
- // c.onmousemove = function(event){
|
|
|
-
|
|
|
- // ctx.arc(event.clientX,event.clientY,50,0,2*Math.PI);
|
|
|
-
|
|
|
- // ctx.stroke();
|
|
|
-
|
|
|
- // console.log(event)
|
|
|
- // };
|
|
|
- // c.onmousedown=function(event){
|
|
|
- // ctx.beginPath();
|
|
|
- // console.log(event)
|
|
|
- // };
|
|
|
- // c.onmouseup=function(event){
|
|
|
- // ctx.closePath();
|
|
|
- // console.log(event)
|
|
|
- // };
|
|
|
-
|
|
|
-// ctx.fillStyle = 'blueviolet';
|
|
|
-// ctx.strokeStyle = 'blueviolet';
|
|
|
-// c.addEventListener('mousemove', function(e){
|
|
|
-// var x, y;
|
|
|
-// x = e.pageX;
|
|
|
-// y = e.pageY;
|
|
|
-// setTimeout(function(){
|
|
|
-// ctx.lineTo(x - c.offsetLeft, y - c.offsetTop);
|
|
|
-// ctx.moveTo(x - c.offsetLeft, y - c.offsetTop);
|
|
|
-// ctx.stroke();
|
|
|
-// },1)
|
|
|
-// });
|
|
|
-
|
|
|
-
|
|
|
-// var c = document.getElementById("draw2"),
|
|
|
-// ctx = c.getContext("2d"),
|
|
|
-
|
|
|
- w = c.width = window.innerWidth,
|
|
|
- h = c.height = window.innerHeight,
|
|
|
-
|
|
|
- opts = {
|
|
|
- color: "hsl(hue,100%,40%)",
|
|
|
- radius: 10,
|
|
|
- },
|
|
|
- tick = 0,
|
|
|
- currentHue = 0,
|
|
|
-
|
|
|
- painting = false;
|
|
|
-
|
|
|
-c.onmousedown = function() {
|
|
|
- painting = true;
|
|
|
- console.log("Down");
|
|
|
-};
|
|
|
-c.onmouseup = function() {
|
|
|
- painting = false;
|
|
|
- console.log("Up");
|
|
|
-};
|
|
|
-c.addEventListener("mousemove", function(e){
|
|
|
- var posX = e.pageX,
|
|
|
- posY = e.pageY;
|
|
|
-
|
|
|
- if(painting){
|
|
|
- ++tick;
|
|
|
- if(!(tick%10)){
|
|
|
- if((currentHue !== 356)){
|
|
|
- currentHue++
|
|
|
- } else {
|
|
|
- currentHue = 0;
|
|
|
- }
|
|
|
- console.log("change");
|
|
|
- };
|
|
|
-
|
|
|
- currentColor = opts.color.replace("hue", currentHue);
|
|
|
- ctx.fillStyle = "blue";
|
|
|
- ctx.beginPath()
|
|
|
- ctx.arc(posX, posY, opts.radius, 0, Math.PI * 2);
|
|
|
- ctx.fill();
|
|
|
- }
|
|
|
-
|
|
|
-});
|
|
|
-
|
|
|
-window.addEventListener("resize", function(){
|
|
|
- w = c.width = window.innerWidth;
|
|
|
- h = c.height = window.innerHeight;
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
