html 학습canvas

14733 단어 htmlcanvas2d

html 학습canvas


기본 기능

  • document 대상 획득var canvas = document.getElementById("homework");
  • 이것은script 코드 바깥쪽에 정의된...
  • 캔버스의 상하문 대상 획득var context = canvas.getContext("2d");
  • 조정 매개 변수
  • moveTo(x,y)드로잉 커서 조정
  • lineTo(x,y)선분을 (x, y)
    • 까지 그립니다.
  • 선의 속성: 
    strokeStyle //  :"F00","FF0000","rgb(255,0,0,1)",red
lineWidth   //  ,     
lineCap       //       "butt","round","square"
lineJoin  //     "miter","round","bevel"
lineDash()    //  [ , ]
  • 텍스트 속성
    font  //(  )(  )      "30px   "
font  //  (     ) "lighter 30px   " "normal" "bold" "bolder" 
font  //   "normal" "italic" "oblique"
textAlign //     "start" "end" "left" "right" "center"
textBaseline//     "alphabetic""top""bottom""middle""hanging""ideographic"
measureText(Text)//
  • stroke()스플라인 또는 fill()채우기
  • javascript
    fillStyle

    • ​ 
  • <!DOCTYPE HTML>
<HTML> <head> <title>canvas</title> </head> <body> <canvas id="homework" width="200" height = "200" style="border:solid 1px #CCC;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("homework"); var context = canvas.getContext("2d"); //           function close() { context.beginPath();//     context.moveTo(10, 10); context.lineTo(180, 90); context.lineTo(20, 80); context.closePath();//   context.fillStyle="red"; context.fill();//     } //  ... function writing(words) { //(text,x,y,maxWidth) context.font = "30px Arial"; context.fillText(words , 10, 75);//   context.strokeText(words, 10, 150);//   } ////  (x,y,width,height) function rect() { context.rect(20,20,150,80); context.stroke(); context.strokeRect(20, 20, 60, 80); context.fillRect(30, 30, 150, 100); context.clearRect(50, 50, 80, 50)//     } //   function Arc(){ var pi = Math.PI; var degToRad = pi/180; //arc(x,y,radius,startAngle,endAngle,antiClockwise); context.arc(100,70,50,0,90*degToRad,true); context.fill(); } </script> </body> </HTML>

    • 고급 기능

  • 이미지 그리기
    context.drawImage(image， dx， dy， dw， dh)

context.drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,dx,dy,dw,dh);

var image = new Image();
image.src = "http://211.66.128.178/picSrc/    / .png";//       
image.onload = function(){
    context.drawImage(image,50,50);
}
  • 픽셀 작업
  • 각 픽셀 객체는 1씩 유지됩니다.길다넓다RGB+ 투명도
    • var imageData = context.createImageData(100, 100);     //    ( , )( )

context.drawImage(image, 10, 10);
var imageData = context.getImageData(10, 10, 201, 146);//    (x,y, , )

for (var i = 0; i < 201 * 146 * 4; i += 4) {
  imageData.data[i] = 255 - imageData.data[i];
  imageData.data[i + 1] = 255 - imageData.data[i + 1];
  imageData.data[i + 2] = 255 - imageData.data[i + 2];       
}

context.putImageData(imageData, 230, 10);//        ( , )
  • 변환
  • 초점이동context.translate(x, y);// context.transform(1, 0, 0, 1, x, y);
  • 회전
    • context.rotate(angle);// context.transform(cos30, sin30, -sin30, cos30, 1, 1); 
    //       
    context.strokeRect(50, 50, 150, 100);
    var degToRad = Math.PI / 180;
    context.translate(125, 100);  //        
    context.rotate(45 * degToRad);//  
    context.translate(-125, -100);//   
    context.strokeRect(50, 50, 150, 100);
  • 배율: 입력 음수, 캔버스 뒤집기

    • ​ context.scale(x， y)//
    ​ context.transform(0.5, 0, 0, 0.5, 1, 1);
  • 충전
  • 선형 그래디언트
    • //(x0,y0,x1,y1)

var gradient = context.createLinearGradient(50, 0, 350, 0);
            //breakPoint

gradient.addColorStop(0, "#FF0000");
gradient.addColorStop(0.5, "#00FF00");
gradient.addColorStop(1, "#0000FF");

context.fillStyle = gradient;
context.fillRect(10, 10, 380, 180);//
  • 레이디얼 그라데이션
    • context.createRadialGradient(x0， y0， r0， x1， y1， r1)
//          ，                   ，                   。

var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 200);
    gradient.addColorStop(0, "#FF0000");
    gradient.addColorStop(0.5, "#00FF00");
    gradient.addColorStop(1, "#0000FF");
    context.fillStyle = gradient;
    context.fillRect(10, 10, 380, 180);
  • 이미지 채우기
    • context.createPattern(image， repetition)
//          ，     image         ，     repetition       ，  “repeat”（    ）、“repeat-x”（     ）、“repeat-y”（     ） “no-repeat”（   ）。

image.onload = function () {      
  var pattern = context.createPattern(image, "repeat");     
  context.fillStyle = pattern;      
  context.fillRect(10, 10, 380, 180);
}
    ​
  • 섀도우 효과
  • image.onload = function () {      
context.shadowColor = "red";  //     
context.shadowOffsetX = 5;    //   
context.shadowOffsetY = 10;

context.shadowBlur = 10;      //    

context.fillStyle = "blue";
context.fillRect(10, 10, 180, 100);
context.drawImage(image, 200, 10);  
}

  • 잘라내기
  • clip () 방법은 현재 정해진 경로로 둘러싸인 구역을 커팅 구역으로 하고, 호출된 후 커팅 구역 내의 도형만 그립니다.원상태로 돌아가려면 커팅 영역을 캔버스 크기의 직사각형으로 설정하면 됩니다.다음과 같습니다:
    • context.clip()
  • 드로잉 상태
    //save()                     ，                ，     restore()          save()    。    
//          beginPath()  。
context.save();
  context.shadowColor = "red";
  context.shadowOffsetX = 5;
  context.shadowOffsetY = 10;
  context.shadowBlur = 10;
  context.fillStyle = "blue";
  context.fillRect(10, 10, 180, 100);

context.restore();
  context.fillRect(210, 10, 180, 100);
  • 합성context.globalCompositeOperation = "destination-over"
    • [STUDY] React 환경 설정하기(2)
    Go부터 Workflows 실행

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage