Canvas 드로잉

10138 단어 canvas
예:
<script>
	function draw(){
		var canvas = document.getElementById("can");
		var context = canvas.getContext("2d");
		// 
		context.save();
		// 
		context.translate(70,140);
		// 
		context.beginPath();
		context.moveTo(0,0);
		context.lineTo(70,-70);
		context.stroke();
		// 
		context.restore();
	}
	window.addEventListener("load",draw,true);
</script>
<body>
	<canvas id="can" style="border:1px solid;" width="200" height="200"></canvas>
</body>

곡선원형화법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas Primer - Example: Using paths</title>
    <script type="text/javascript"><!--
window.addEventListener('load', function () {
  // Get the canvas element.
  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) {
    return;
  }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context) {
    return;
  }

  context.fillStyle   = '#00f';
  context.strokeStyle = '#f00';
  context.lineWidth   = 4;

  // Draw a line, then a Bèzier curve.
  context.beginPath();
  context.moveTo(10, 10);
  context.lineTo(100, 100);
  context.moveTo(150, 100);

  // Arguments: cp1x, cp1y, cp2x, cp2y, x, y
  // cp = control point.
  context.bezierCurveTo(180, 30, 250, 180, 300, 100);
  context.stroke();
  context.closePath();

  // Draw a circle using the arc function.
  context.beginPath();

  // Arguments: x, y, radius, start angle, end angle, anticlockwise
  context.arc(125, 115, 30, 0, 360, false);
  context.stroke();
  context.closePath();
}, false);
    // --></script>
  </head>
  <body>
    <p><canvas id="myCanvas" width="300" height="150">Your browser does not have 
    support for Canvas.</canvas></p>
  </body>
</html>

다음 섹션은 마운트:http://blog.bingo929.com/html-5-canvas-the-basics-html5.html
이미지 삽입
drawImage 방법으로 canvas에 다른 이미지를 삽입할 수 있습니다
(img 및 canvas 요소).Opera에서 다시 canvas에서 SVG 그래픽을 그릴 수 있습니다.이 방법은 비교적 복잡하다. 3개, 5개 또는 9개의 매개 변수가 있을 수 있다.
3개의 매개변수: 가장 기본적인 drawImage 사용 방법입니다.하나의 매개 변수는 이미지 위치를 지정하고, 다른 두 매개 변수는 이미지가 canvas에 있는 위치를 설정합니다.
5개의 매개 변수: 중급의drawImage 사용 방법은 상기 3개의 매개 변수를 포함하고 두 개의 매개 변수를 추가하여 삽입 이미지의 너비와 높이를 표시합니다. (이미지의 크기를 바꾸고 싶다면)
9개 파라미터: 가장 복잡한 drawImage 잡용 방법은 상기 5개 파라미터 외에 4개 파라미터가 원본 이미지의 위치와 높이 폭을 설정합니다.이 매개 변수들은 그림을 표시하기 전에 원본 이미지를 동적으로 재단할 수 있도록 합니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-drawimage.html 
// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

픽셀 레벨 작업
2D Context API는 픽셀 레벨 작업에 세 가지 방법을 제공합니다: createImageData, getImageData, 및
putImageData.
ImageData 객체는 이미지 픽셀 값을 저장합니다.대상마다 세 가지 속성이 있습니다:width,height와
data.데이터 속성 유형은width*height*4개의 픽셀 값을 저장하는 CanvasPixelArray입니다.픽셀마다 RGB 값과 투명도 알파 값(알파를 포함하여 0~255 값)이 있습니다.픽셀의 순서는 왼쪽에서 오른쪽, 위에서 아래로 줄에 따라 저장됩니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata2.html 
// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;
 
// Loop over each pixel   set a transparent red.
for (var i = 0; n = pix.length, i &lt; n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 127; // alpha channel
}
 
// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

참고: 모든 브라우저가 createImageData를 구현한 것은 아닙니다.지원되는 브라우저에서 getImageData 방법으로 ImageData 객체를 가져와야 합니다.예시 코드를 참고하십시오.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata2.html
ImageData를 통해 많은 기능을 수행할 수 있습니다.이미지 필터를 구현할 수 있거나 분형과 다른 필터와 같은 수학적 시각화를 실현할 수 있다.다음 필터는 간단한 색상 반전 필터를 구현합니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata.html 
// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>);
var pix = imgd.data;
 
// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i &lt; n; i += 4) {
  pix[i  ] = 255 - pix[i  ]; // red
  pix[i+1] = 255 - pix[i+1]; // green
  pix[i+2] = 255 - pix[i+2]; // blue
  // i+3 is alpha (the fourth element)
}
 
// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, <var>x</var>, <var>y</var>);

문자
최근의 WebKit 버전과 Firefox 3.1 nightly build가 Text API를 지원하기 시작했지만 글의 완전성을 확보하기 위해 여기서 문자 API를 소개하기로 했습니다.
context 객체는 다음 텍스트 속성을 설정할 수 있습니다.
font: 텍스트 글꼴, CSS font-family 속성
textAlign: 문자 수평 정렬.취할 수 있는 속성 값: start,end,left,right,center.기본값:start.
textBaseline: 텍스트 세로 정렬.취할 수 있는 속성 값: top,hanging,middle,alphabetic,ideographic,bottom.기본값:alphabetic.
두 가지 방법으로 텍스트를 그릴 수 있습니다: fillText와 strokeText.첫 번째는 fillStyle로 채워진 문자를 그리고, 후자는 스트로크 스타일 테두리만 있는 문자를 그린다.두 매개변수는 동일합니다. 그릴 문자와 문자의 위치 (x, y) 좌표입니다.최대 너비 옵션도 있습니다.만약 필요하다면, 브라우저는 지정한 너비에 맞게 문자를 줄일 것입니다.
문자 정렬 속성은 문자 및 설정에 영향을 미칩니다.
(x, y) 좌표의 상대 위치입니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-text.html 
context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

음영
shadowColor: 음영 색상.그 값은 CSS 색상 값과 일치합니다.
shadowBlur: 그림자 흐림 정도를 설정합니다.이 값이 클수록 그림자가 흐려집니다.그 효과는 Photoshop의 고스 모호 필터와 같습니다.
shadow OffsetX와 shadow OffsetY: 그림자의 x와 y 편이량, 단위는 픽셀입니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-shadows.html 
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100);

색상 그라데이션
CSS 색상을 제외하고 fillStyle 및 strokeStyle 속성은 CanvasGradient 객체로 설정할 수 있습니다.CanvasGradient를 통해 선과 채우기에 색상 그라데이션을 사용할 수 있습니다.
CanvasGradient 대상을 만들려면createLinearGradient와createRadialGradient 두 가지 방법을 사용할 수 있습니다.전자는 선형 색상 그래디언트를 생성하고 후자는 원형 색상 그래디언트를 생성합니다.
색상 그라데이션 객체를 작성한 후 객체의 addColorStop 방법을 사용하여 색상 중간 값을 추가할 수 있습니다.
다음 코드에서는 색상 그라데이션 사용 방법을 보여 줍니다.
http://www.robodesign.ro/coding/canvas-primer/20081208/example-gradients.html 
// You need to provide the source   destination (x,y) coordinates 
// for the gradient (from where it starts   where it ends).
var gradient1 = context.createLinearGradient(<var>sx</var>, <var>sy</var>, <var>dx</var>, <var>dy</var>);
 
// Now you can add colors in your gradient.
// The first argument tells the position for the color in your gradient. The 
// accepted value range is from 0 (gradient start) to 1 (gradient end).
// The second argument tells the color you want, using the CSS color format.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue
 
// For the radial gradient you also need to provide source
//   destination circle radius.
// The (x,y) coordinates define the circle center points (start   
// destination).
var gradient2 = context.createRadialGradient(<var>sx</var>, <var>sy</var>, <var>sr</var>, <var>dx</var>, <var>dy</var>, <var>dr</var>);
 
// Adding colors to a radial gradient is the same as adding colors to linear 
// gradients.
Python 응용 프로그램 비활성화
애플릿 좋아요 모음 기능

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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