Canvas 튜토리얼

일.Canvas 기본 용법##

canvas 는 중국어로 "화포"를 의미하며, <canvas> 는 HTML5 의 새 요소로, IE9+ 가 지원합니다

canvas 요소의 기본 크기는 300px * 150px 이며, 가장 간단한 코드는 투명한 사각형 화포를 생성합니다. 예를 들어:

<canvas>
  浏览器不支持 canvas
</canvas>

브라우저가 지원한다면, 300px * 150px 의 투명한 블록은 보이지 않습니다 (투명하므로 요소 검사를 통해 찾을 수 있습니다). 브라우저가 지원하지 않는다면, 대체 텍스트 "浏览器不支持 canvas"가 표시됩니다. 예를 들어 IE8 등.

화포가 있다면, 뭔가 그려보고 싶습니다. 그러나 canvas 에게 가장 쉬운 것은 직선을 그리는 것이 아니라, 빈/실심 사각형을 그리는 것입니다. 예를 들어:

<canvas id="my_canvas"> 浏览器不支持 canvas </canvas>
<script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  if(canvas.getContext){
  var ctx = canvas.getContext('2d');//获取 2d 上下文
  ctx.strokeStyle = '#f00';//边框设置为红色
  ctx.lineWidth = 3;//线宽设置为 3px
  ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';//填充半透明蓝色
  ctx.strokeRect(0, 0, 50, 50);//描边
  ctx.fillRect(0, 0, 50, 50);//填充
  }
</script>

결과는 이렇습니다:

이.사각형 그리기, 원 그리기, 선 그리기##

사각형은 위에서 이미 그렸습니다. 컨텍스트 객체의 묘변과 충전 메서드를 사용했습니다. 이 외에도 사각형에 관한 메서드가 하나 더 있습니다: clearRect() 파라미터 의미는 같으며, 사각형 블록을 파내는 작용을 합니다 (투명색으로 지정 영역 충전)

원을 그리는 것은 조금 더 번거롭습니다. 예를 들어, 중심이 (30, 30), 반지름이 20 인 원을 그릴 경우:

ctx.beginPath();//创建路径
ctx.arc(30,30,20,0,Math.PI*2,true);//设置弧线路径
ctx.closePath();//闭合路径
ctx.stroke();//描边
ctx.fill();//填充

arc(x, y, radius, startAngle, endAngle, counterclockwise) 메서드는 호선을 그리는 데 사용되며, (x, y) 를 중심으로, radius 를 반지름으로, startAngle 과 endAngle 을 각각 시작 각도와 종료 각도로 나타냅니다. 마지막 파라미터는 앞의 두 각도 값이 시계 방향인지 반시계 방향인지를 나타내며, false 는 시계 방향을 나타냅니다.

선을 그리는 것은 원을 그리는 것보다 간단합니다 ((30, 30) 에서 50px 의 가로선을 그릴 경우):

ctx.beginPath();//创建路径
ctx.moveTo(30, 30);//把起点移动到 (30, 30)
ctx.lineTo(80, 30);//设置路径连接两点
ctx.closePath();//闭合路径
ctx.stroke();//绘制

선과 호를 그릴 수 있다면, 삼각형과 오각형도 문제없습니다. 위에서 사용한 패스 메서드 외에도, 다음과 같은 메서드가 있습니다:

arcTo(x1, y1, x2, y2, radius): 이전 점부터 호선을 그리기 시작하여 (x2, y2) 에서 종료하며, 지정된 반지름 radius 로 (x1, y1) 을 통과합니다
bezierCurveTo(c1x, c1y, c2x, c2y, x, y): 베지어 곡선, 이전 점부터 곡선을 그리기 시작하여 (x, y) 에서 종료하며, (c1x, c1y) 와 (c2x, c2y) 를 제어점으로 합니다
quadraticCurveTo(cx, cy, x, y): 이차 베지어 곡선, 이전 점부터 이차 곡선을 그리기 시작하여 (x, y) 에서 종료하며, (cx, cy) 를 제어점으로 합니다
rect(x, y, width, height): 사각형 패스 그리기

패스를 설정한 후, fill() 메서드로 충전하거나 stroke() 메서드로 묘변할 수 있습니다. 또한 clip() 메서드를 사용하여 아래 그림을 제한할 수 있습니다 (PS 의 선택 영역에 해당, 자세한 내용은 W3School 참조)

삼.이미지 그리기##

이 기능은 의심할 여지 없이 가장 중요합니다. 간단한 도형 그리기는 그다지 실용적이지 않습니다 (좌표로 초상화를 그려보세요)

###1.이미지 가져오기##

HTMLImageElement 또는 다른 canvas 요소에 대한 참조를 소스로 얻거나, URL 을 제공하여 이미지를 사용할 수 있습니다

이미지 소스는 img, video, canvas 요소의 참조가 될 수 있습니다. 물론, 그 자리에서 생성한 new Image() 도 가능하지만, 새로운 Image 객체의 load 이벤트 핸들러 내에서 참조해야 한다는 점에 주의하십시오.否则, 이미지가 로드 완료되지 않았으므로 일부 브라우저에서 오류가 발생할 수 있습니다. 물론, Base64 인코딩으로 이미지 소스를 사용할 수도 있습니다.

drawImage() 함수를 사용하여 이미지를 화포에 그리기

drawImage(image, x, y): 간단 명료한 좋은 메서드
drawImage(image, x, y, width, height): 스케일링 지원
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): 트리밍 지원 (큰 이미지에서 작은 부분을 잘라냄, 자세한 내용은 MDN 참조)

###2.이미지 내보내기##

이는 물론 이미지 조작보다 더 중요합니다. 화포에서 오랫동안 그린 후, 그것을 이미지로 내보내려면 어떻게 해야 할까요

canvas.toDataURL(): 이미지 URL 을 반환합니다. URL 을 직접 img 의 src 에 할당하기만 하면 표시할 수 있습니다. 일반 이미지 주소와 마찬가지로, 어떻게 사용해도 됩니다. 그러나주의가 필요합니다:

이미지는 다른 도메인에서 올 수 없습니다. 네, 맞습니다. 또 크로스도메인 보안 제한입니다. 다른 도메인에서 온 경우, toDataURL() 메서드는 오류를 던집니다
toDataURL 메서드는 canvas 의 것이며, 위에서 계속 사용해 온 ctx 컨텍스트 객체의 것이 아님을 잘 확인하십시오. 또한 메서드명의 대소문자도 특수합니다

###3.이미지 조작##

canvas가장 강력한 기능은 이미지 데이터를 얻는 것입니다. 화포 위의 각 포인트의 색상 값을 얻을 수 있습니다. canvas 가 없으면 할 수 있을까요? 할 수 없습니다. 따라서 간단한 이미지 처리는 현재 js 로搞定할 수 있으며, 백엔드 함수의 참여는 필요하지 않습니다.

예를 들어, 상문의 스크린샷에 간단한 반색 처리를 수행합니다:

var canvas = document.getElementById('my_canvas');
if(canvas.getContext){
    var ctx = canvas.getContext('2d');//获取 2d 上下文
    //画图
    var img = document.images[0];
    ctx.drawImage(img, 0, 0);
    //获取 ImageData
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imgData.data;//获取 rgba（ImageData 的 data 属性是每个像素点的 rgba 值）
    //反色
    var r, g, b, a;
    for(var i = 0, len = data.length;i < len; i+=4){
        //取色
            r = data[i];
            g = data[i+1];
            b = data[i+2];
            //a = data[i+3];//反色不需要透明度
            //反色
            data[i] = 255 - r;
            data[i+1] = 255 - g;
            data[i+2] = 255 - b;
    }

    imgData.data = data;//写回图像数据
    ctx.putImageData(imgData, 0, 0);//显示结果
}

처리 효과는 매우 훌륭하며, 아래 그림과 같습니다:

작은 문제에 주의가 필요합니다. Chrome 은 drawImage 로 로컬 이미지를 그리는 것을 허용하지 않습니다. 따라서 위의 결과는 FF 하의 것입니다. Ajax 를 테스트할 때도 유사한 문제에 직면했습니다. FF 는 일반적으로 크로스도메인 보안을 제한할 때 로컬 리소스를 제한하지 않지만, Chrome 은 제한합니다. 서버 상의 동원 리소스에 대해서는 이러한 차이가 존재하지 않습니다.

사.Canvas 의 더 많은 기능##

그라데이션, 패턴 충전, 선 제어, 그림자, 회전, 변형, 스케일링, 합성, 애니메이션 등 더 많은 내용은 참고 자료의 MDN 튜토리얼을 참조하십시오

참고 자료###

MDN 튜토리얼: 매우 훌륭한 튜토리얼
《JavaScript 高级程序设计》: 도서관에 돌려주기 아까운 좋은 책

일.Canvas 기본 용법##

이.사각형 그리기, 원 그리기, 선 그리기##

삼.이미지 그리기##

사.Canvas 의 더 많은 기능##

참고 자료###

댓글

댓글 작성