Cavas 대시보드 기능

Cavas 화판 기능 - 허준활
CSS 스타일 코드

body,
			html {
				text-align: center;
				padding-top: 20px;
				/*margin: 0;*/
			}

			canvas {
				box-shadow: 0 0 10px #333;
				margin: 0 auto;
				/*position: absolute;
				left: 0; 
				border: 1px solid red;*/
			}

벌크 코드입니다.

<body onload="draw()">
   <canvas id="canvas" width="800" height="600">
   </canvas>
   <script>
			function draw() {
				var canvas = document.getElementById("canvas");
				 if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					 //  
					//        
					 canvas.onmousedown=function(e){
						var ev=e||window.event;//   
					var x=ev.clientX-canvas.offsetLeft;
						var y=ev.clientY-canvas.offsetTop;
						
						ctx.strokeStyle='red';
					 	ctx.lineWidth=10;
					
					 	ctx.beginPath();
						ctx.moveTo(x,y);

					//onmousemove
					 	canvas.onmousemove=function(e){
							var ev=e||window.event;//   
						var x=ev.clientX - canvas.offsetLeft;
						var y=ev.clientY - canvas.offsetTop;
							ctx.lineTo(x,y);
					 		ctx.stroke();
				 	}
					 canvas.onmouseup=function(){
					  canvas.onmousemove="";//            
					
					   }
					 }
					}
            }
            </script>
            </body>

Cavas 대시보드 기능

좋은 웹페이지 즐겨찾기