HTML5 Canvas의 기본 사용법 소개-H5 튜토리얼-php.cn

HTML5 Canvas의 기본 사용법 소개

不言

풀어 주다： 2018-11-23 16:34:09

앞으로

2385명이 탐색했습니다.

이 글은 HTML5 Canvas의 기본 사용법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

canvas는 HTML5의 모든 새로운 기능 중에서 제가 가장 좋아하는 태그입니다. 매우 강력하기 때문에 모든 종류의 흥미로운 특수 효과를 얻을 수 있습니다.

1. 캔버스의 기본 사용법

- 인라인 블록 요소입니다
- 기본 크기는 300 x 150입니다. CSS에서는 스타일을 설정할 수 없습니다. 태그에만 속성을 쓸 수 있습니다. 너비 = 400, 높이 = 300
- 캔버스 가져오기
var 캔버스 = 문서. querySelector("canvas")
- 브러시(컨텍스트) 가져오기
var ctx = canvas.getContext('2d')

2. 캔버스는 기본 그래픽을 그립니다

채워진 직사각형
ctx.fillRect(0,0,100,100)
fill : 채우기 관련
Rect: 직사각형 그리기

채우기 그래픽 설정 스타일
ctx.fillStyle = 'green'

Stroke 직사각형
ctx.strokeRect(100,100,100,100)

Stroke 그래픽 설정 스타일
ctx.스트로크스타일 = 'white'
ctx.lineWidth = 100

캔버스 전체 지우기
ctx.clearRect(0,0,canvas.width,canvas.height)

선분 그리기
ctx.moveTo(100,100)
ctx.lineTo(100,100)

가장자리 그리기
ctx.Stroke()

fill
ctx.fill()-

시작점과 끝점 연결
ctx.closePath()
ctx.save() 시작 부분
…
ctx.restore( )End

3. 캔버스 시계

캔버스를 사용하면 저울과 시침을 포함한 시계를 그릴 수 있습니다. 매초 움직이는 저울은 데이터 개체를 사용하여 타이머를 통해 수시로 업데이트될 수 있습니다.

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    function move() {
        ctx.save()
            ctx.translate(300,300)
            //  初始化一些公共的样式
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 8
            ctx.scale(0.5,0.5)

            // 画外面的圆
            ctx.save();
                ctx.beginPath();
                ctx.strokeStyle = 'gold';
                ctx.arc(0,0,150,0,2*Math.PI);
                ctx.stroke();
            ctx.restore();

            // 画里面的刻度
            ctx.save()
                ctx.beginPath();
                for (var i=0; i <p>정지영상은 아래와 같습니다. </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png" title="1542961926883406.png" alt="HTML5 Canvas의 기본 사용법 소개"></span></p><h4>스크래치 카드 효과</h4><p>캔버스의 그래픽 합성 속성을 사용하여 이미지 합성 효과를 얻을 수 있습니다. 특히 스크래치 카드에 적용됩니다. <br>globalCompositeOperation 속성은 소스(새) 이미지를 대상(기존) 이미지에 그리는 방법을 설정하거나 반환합니다. <br>소스 이미지 = 캔버스에 배치하려는 그림 <br>대상 이미지 = 이미 캔버스에 배치한 그림 </p> <p   style="max-width:90%"> <img src="https://img.php.cn//upload/image/360/936/462/1542961942862890.png" title="1542961942862890.png" alt="HTML5 Canvas의 기본 사용법 소개"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")
    var ctx = getCtx()
    log(ctx)
    ctx.fillStyle = 'yellow'
    ctx.fillRect(0,0,400,400)

    ctx.globalCompositeOperation = 'destination-out';

    // 鼠标按下
    canvas.onmousedown = function (event) {
        ctx.beginPath()
        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
        ctx.fill()
        // 鼠标移动
        document.onmousemove = function (event) {
            ctx.beginPath()
            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,
            20,0,2*Math.PI)
            ctx.fill()
        }

        // 鼠标抬起
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
        }
        return false
    }

로그인 후 복사

HTML5 Canvas의 기본 사용법 소개