yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

The canvas put point part1

The canvas put point part1

canvas put point part1

canvas에 이벤트를 활용하여 간단한 그리기 도구 만들기


canvas tag
1
<canvas id="canavs"></canvas>
canvas get context

id canvas를 할당한 tag 생성

1
2
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas를 가져와 context 가져오기

canvas addEventListener
1
2
3
4
var putpoint = (e) => {

};
canvas.addEventListener('mousedown', putpoint);

event를 수행할 pupoint 함수 생성후 canvas에 이벤트 mousedown 등록

draw point
1
2
3
4
5
6
var radius = 10;
var putpoint = (e) => {
    ctx.beginPath();
    ctx.arc(e.offsetx, e.offsetY radius, 0, Math.PI * 2);
    ctx.fill();
};

context arc를 활용하여 좌표에 맞게 원 그리기




comments powered by Disqus