HTML5 새 레이블 Canvas에 대한 자세한 소개

1. 개요

Canvas는 이미지를 표시하는 데 사용됩니다. 기본적으로 JavaScript로 작업할 수 있는 비트맵입니다.

캔버스API를 사용하여 실시간으로 이미지를 생성합니다. 웹 페이지에서 API를 통해 이미지 콘텐츠를 조작할 수 있습니다. 이 경우 HTTP 요청 수 감소, 다운로드되는 데이터 감소, 웹 페이지 로딩 시간 단축, 이미지 실시간 처리 가능 등이 있습니다. >사용하기 전에 먼저 캔버스를 구축해야 합니다.

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持canvas!
</canvas>

브라우저가 캔버스를 지원하지 않으면 캔버스 태그 중간에 텍스트가 표시됩니다. support canvas!" 그런 다음

. JavaScript

를 사용하여 캔버스의

DOM 객체

를 가져옵니다. 다음으로, getContext 메서드가 배포되었는지 확인하여 브라우저가 Canvas API를 지원하는지 확인합니다. getContext를 사용합니다. ('2d') 평면 이미지의 컨텍스트를 초기화하는 방법

var canvas = document.getElementById('myCanvas');

이제 캔버스 중앙에 평면 이미지를 생성합니다. 2. 그리기 방법( 1) 채우기 색상

채우기 색상을 설정합니다.

rree

(2) 직사각형을 그립니다.

속이 빈 직사각형을 그립니다.

사각형 영역의 내용 지우기

if (canvas.getContext) {    //some code here}

(3) 경로 그리기

var ctx = canvas.getContext('2d');

(4) 원과 섹터 그리기

섹터 그리기 방법

ctx.fillStyle = "#000000";//设置填充色为黑色ctx.strokeStyle = "#FF6600"; //设置笔触颜色

arc 방법의 x 및 y 매개변수는 원의 중심 좌표이고, radius는 반지름이며, startAngle과 endAngle은 시작 각도와 끝입니다. 섹터 각도(도 단위로 표시). 그림을 시계 반대 방향(true)으로 그릴지 아니면 시계 방향으로(false)로 그릴지를 나타냅니다.

속이 빈 원을 그립니다. Circle

ctx.fillStyle = "#000000";//填充颜色，即矩形颜色ctx.fillRect(x, y, width, height);

(5) 텍스트 그리기

텍스트를 추가하려면 fillText 메서드를 사용하고, 빈 단어를 추가하기 전에는 스트로크 텍스트 메서드를 사용합니다. 글꼴, 텍스트 방향, 색상 및 기타 속성을 설정해야 합니다.

ctx.strokeStyle = "#FF6600"; //笔触颜色，即矩形边框颜色ctx.strokeRect(x, y, width, height);

fillText 메서드는 텍스트 나누기를 지원하지 않습니다. 즉, 모든 텍스트가 한 줄에 나타납니다. 따라서 여러 줄의 텍스트를 생성하려면 fillText 메서드를 여러 번만 호출하면 됩니다.

2.1 그라데이션

그라디언트 색상을 설정합니다.

ctx.clearRect(x, y, width, height);

createLinearGradient 메소드의 참조는 (x1, y1, x2, y2)입니다. 여기서 x1과 y1은 시작점 좌표이고 x2와 y2는 끝점 좌표입니다. 다양한 좌표값을 통해 위에서 아래로, 왼쪽에서 오른쪽으로 등의 그라데이션을 생성할 수 있습니다.

addColorStop 메소드의 매개변수는 (offset, color)입니다. 여기서 offset은 0.0에서 1.0 사이의 부동 소수점 값으로 그라데이션의 시작점과 끝점 사이의 부분을 나타냅니다. offset 0은 시작점에 해당하고, offset 1은 끝점에 해당하며, color는 CSS 색상 값의 문자열 표현입니다. 사용 방법은 다음과 같습니다.

ctx.beginPath(); //开始路径绘制
ctx.moveTo(20, 20); //设置路径起点
ctx.lineTo(200, 20); //绘制一条到200， 20的直线
ctx.lineWidth = 1.0; //设置线宽
ctx.strokeStyle = "#CC0000"; //设置线的颜色
ctx.stroke(); //进行线的着色，这时整条线才变得可见

2.2 Shadow

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

3,

이미지 처리

방법

3.1 이미지 삽입

캔버스를 사용하면 이미지 파일을 캔버스에 삽입할 수 있습니다. 이미지를 읽은 후 drawImage 메서드를 사용하여 캔버스에 다시 그립니다.

ctx.beginPath();

ctx.arc(60, 60, 50, 0, Math.PI*2, true);

ctx.fillStyle = "#000000";

ctx.fill();

이미지 로딩에 시간이 걸리기 때문에 이미지 로딩이 완료된 후에만 drawImage 메소드를 호출할 수 있으므로 위의 코드를 다시 작성해야 합니다.

ctx.beginPath();

ctx.arc(60, 60, 50, 0, Math.PI*2, true);

ctx.lineWidth = 1.0;

ctx.strokeStyle = "#000";

ctx.stroke();

drawImage() 메소드는 세 개의 매개변수를 허용합니다. 첫 번째 매개변수는 이미지 파일의 DOM 요소(예:

img 태그

)이고, 두 번째와 세 번째 매개변수는 첫 번째 매개변수는 캔버스 요소의 이미지 왼쪽 상단 모서리 좌표입니다. 위 예에서 (0, 0)은 이미지의 왼쪽 상단 모서리를 캔버스 요소의 왼쪽 상단 모서리에 배치한다는 의미입니다.

3.2 Canvas 내용 읽기 getImageData 메소드를 사용하면 Canvas 내용을 읽고 각 픽셀에 대한 정보가 포함된 객체를 반환할 수 있습니다.

ctx.font = "Bold 20px Arial"; //设置字体
ctx.textAlign = "left"; //设置对齐方式
ctx.fillStyle = "#008600"; //设置填充颜色
ctx.fillText("Hello!", 10, 50); //设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100); //绘制空心字

imageData 개체에는 데이터 속성이 있고 해당 값은

1차원 배열

입니다. 이 배열의 값은 순서대로 각 픽셀의 빨강, 녹색, 파랑, 알파 채널 값이므로 배열의 길이는 이미지의 픽셀 너비 * 이미지의 픽셀 높이 * 4와 같습니다. 이며, 각 값의 범위는 0~255이다. 이 배열은 읽기만 가능한 것이 아니라 쓰기도 가능하므로 이 배열의 값을 조작함으로써 이미지 연산이라는 목적을 달성할 수 있습니다. 이 배열을 수정한 후 putImageData 메서드를 사용하여 배열 내용을 캔버스에 다시 작성합니다.

var myGradient = ctx.createLinearGradient(0, 0, 0, 160);

myGradient.addColorStop(0, "#BABABA");

myGradient.addColorStop(1, "#636363");

3.3 픽셀 처리

필터가 픽셀을 처리하는 함수라고 가정하면 전체 캔버스 처리 과정은 다음과 같은 코드로 표현할 수 있습니다.

ctx.fillStyle = myGradient;

ctx.fillRect(10, 10, 200, 100);

다음은 이를 처리하는 몇 가지 일반적인 방법입니다.

（1）灰度效果

灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个像素的红色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以3，再将结果写回数组。

grayscale = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
    }    return pixels;

}

（2）复古效果

复古效果（sepia）则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。

sepia = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i +=4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); //red
        d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); //green
        d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); //blue    
        }    
        return pixels;

}

（3）红色蒙版效果

红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为0。

red = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = (r + g + b) / 3; //红色通道取平均值
        d[i + 1] = d[i + 2] = 0;
    }    return pixels;

}

（4）亮度效果

亮度效果（brightness）是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。

brightness = function(pixels, delta) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {
        d[i] += delta; //red
        d[i + 1] += delta; //green
        d[i + 2] += delta; //blue    
        }    
        return pixels;

}

（5）反转效果

反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255 - 原值）。

invert = function(pixels) {    
var d = pixels.data;    
    for (var i = 0; i < d.length; i += 4) {
        d[i] = 255 - d[i];
        d[i + 1] = 255 - d[i + 1];
        d[i + 2] = 255 - d[i + 2];
    }    return pixels;

}

3.4 将Canvas转化为图像文件

对图像数据作出修改以后，可以使用toDataURL方法，将Canvas数据重新转化成一般的图像文件形式。

<p style="margin-bottom: 7px;">function convertCanvasToImage(canvas) {    <br/>var image = new Image();<br/>    image.src = canvas.toDataURL("image/png");    <br/>    return image;<br/>}</p>

4、保存和恢复上下文

save方法用于保存上下文环境，restore方法用于恢复到上一次保存的上下文环境。

ctx.save();

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

ctx.fillStyle = "#CC0000";
ctx.fillRect(10, 10, 150, 150);

ctx.restore();

ctx.fillStyle = "#000000";
ctx.fillRect(180, 10, 150, 100);

 上面的代码一共绘制了两个矩形，前一个有阴影，后一个没有。

위 내용은 HTML5 새 레이블 Canvas에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!