Canvas入门（2）:图形渐变和图像形变换-MySQL 튜토리얼-php.cn

집

데이터 베이스

MySQL 튜토리얼

Canvas入门（2）:图形渐变和图像形变换

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 pm 03:43 PM

canvashttp시작하기변환제도법원천구배

来源：http://www.ido321.com/986.html 一、图形渐变（均在最新版Google中测试） 1、绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = document.getElementById( 'canvas' ); 3: if (canvas == null ) 4: { 5: return false ; 6: } 7: // 获取上下文 8:

来源：http://www.ido321.com/986.html

一、图形渐变（均在最新版Google中测试）

1、绘制线性渐变

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>

<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>

<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>

<span>   4:</span><span>     {</span>

<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>

<span>   6:</span><span>     }</span>

<span>   7:</span><span>     <span>// 获取上下文</span></span>

<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>

<span>   9:</span><span>     <span>// 获取渐变对象</span></span>

<span>  10:</span><span>     <span>var</span> g1 = context.createLinearGradient(0,0,0,300);</span>

<span>  11:</span><span>     <span>// 添加渐变颜色</span></span>

<span>  12:</span><span>     g1.addColorStop(0,<span>'rgb(255,255,0)'</span>);</span>

<span>  13:</span><span>     g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>

<span>  14:</span><span>     context.fillStyle = g1;</span>

<span>  15:</span><span>     context.fillRect(0,0,400,300);</span>

<span>  16:</span><span>     <span>var</span> g2 = context.createLinearGradient(0,0,300,0);</span>

<span>  17:</span><span>     g2.addColorStop(0,<span>'rgba(0,0,255,0.5)'</span>);</span>

<span>  18:</span><span>     g2.addColorStop(1,<span>'rgba(255,0,0,0.5)'</span>);</span>

<span>  19:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>

<span>  20:</span><span>     {</span>

<span>  21:</span><span>         context.beginPath();</span>

<span>  22:</span><span>         context.fillStyle=g2;</span>

<span>  23:</span><span>         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>

<span>  24:</span><span>         context.closePath();</span>

<span>  25:</span><span>         context.fill();</span>

<span>  26:</span><span>     }</span>

createLinearGradient(x1,y1,x2,y2):参数分别表示渐变起始位置和结束位置的横纵坐标

addColorStop(offset,color):offset表示设定的颜色离渐变起始位置的偏移量，取值范围是0~1的浮点值。渐变起始偏移量是0，渐变结束偏移量是1.color是渐变的颜色。

效果：

Canvas入门（2）:图形渐变和图像形变换

2、绘制径向渐变

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>

<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>

<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>

<span>   4:</span><span>     {</span>

<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>

<span>   6:</span><span>     }</span>

<span>   7:</span><span>     <span>// 获取上下文</span></span>

<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>

<span>   9:</span><span>     <span>// 获取渐变对象</span></span>

<span>  10:</span><span>     <span>var</span> g1 = context.createRadialGradient(400,0,0,400,0,400);</span>

<span>  11:</span><span>     <span>// 添加渐变颜色</span></span>

<span>  12:</span><span>     g1.addColorStop(0.1,<span>'rgb(255,255,0)'</span>);</span>

<span>  13:</span><span>     g1.addColorStop(0.3,<span>'rgb(255,0,255)'</span>);</span>

<span>  14:</span><span>     g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>

<span>  15:</span><span>     context.fillStyle = g1;</span>

<span>  16:</span><span>     context.fillRect(0,0,400,300);</span>

<span>  17:</span><span>     <span>var</span> g2 = context.createRadialGradient(250,250,0,250,250,300);</span>

<span>  18:</span><span>     g2.addColorStop(1,<span>'rgba(0,0,255,0.5)'</span>);</span>

<span>  19:</span><span>     g2.addColorStop(0.7,<span>'rgba(255,255,0,0.5)'</span>)</span>

<span>  20:</span><span>     g2.addColorStop(0.1,<span>'rgba(255,0,0,0.5)'</span>);</span>

<span>  21:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>

<span>  22:</span><span>     {</span>

<span>  23:</span><span>         context.beginPath();</span>

<span>  24:</span><span>         context.fillStyle=g2;</span>

<span>  25:</span><span>         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>

<span>  26:</span><span>         context.closePath();</span>

<span>  27:</span><span>         context.fill();</span>

<span>  28:</span><span>     }</span>

createRadialGradient(x1,y1,radius1,x2,y2,radius2):x1,y1,radius1分别是渐变开始圆的圆心横纵坐标和半径。x2,y2,radius2分别是渐变结束圆的圆心横纵坐标和半径。

效果

二、图形变换

1、坐标变换：平移、缩放和旋转

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>

<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>

<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>

<span>   4:</span><span>     {</span>

<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>

<span>   6:</span><span>     }</span>

<span>   7:</span><span>     <span>// 获取上下文</span></span>

<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>

<span>   9:</span><span>     context.fillStyle = <span>'#eeeeff'</span>;</span>

<span>  10:</span><span>     context.fillRect(0,0,400,300);</span>

<span>  11:</span><span>     <span>// 平移坐标原点</span></span>

<span>  12:</span><span>     context.translate(200,50);</span>

<span>  13:</span><span>     context.fillStyle = <span>'rgba(255,0,0,0.25)'</span>;</span>

<span>  14:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>

<span>  15:</span><span>     {</span>

<span>  16:</span><span>         context.translate(25,25);</span>

<span>  17:</span><span>         <span>// 图形缩放</span></span>

<span>  18:</span><span>         context.scale(0.95,0.95);</span>

<span>  19:</span><span>         <span>// 图形旋转</span></span>

<span>  20:</span><span>         context.rotate(Math.PI / 10);</span>

<span>  21:</span><span>         context.fillRect(0,0,100,50);</span>

<span>  22:</span><span>     }</span>

translate(x,y):平移原点，x,y表示向左和向下移动多少单位，默认单位是像素

scale(x,y):缩放，x,y表示水平和垂直方向的缩放大小。小于1缩小，大于1放大。

rotate(angle)：旋转，angle是旋转角度，单位是弧度。大于0表示顺时针旋转，反之逆时针。

效果：

2、矩阵变换

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>

<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>

<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>

<span>   4:</span><span>     {</span>

<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>

<span>   6:</span><span>     }</span>

<span>   7:</span><span>     <span>// 获取上下文</span></span>

<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>

<span>   9:</span><span>     <span>// 定义颜色</span></span>

<span>  10:</span><span>     <span>var</span> colors = [<span>'red'</span>,<span>'orange'</span>,<span>'yellow'</span>,<span>'green'</span>,<span>'blue'</span>,<span>'navy'</span>,<span>'purple'</span>];</span>

<span>  11:</span><span>     <span>// 定义线宽</span></span>

<span>  12:</span><span>     context.lineWidth = 10;</span>

<span>  13:</span><span>     <span>// 矩阵变换</span></span>

<span>  14:</span><span>     context.transform(1,0,0,1,100,0);</span>

<span>  15:</span><span>     <span>// 循环绘制圆弧</span></span>

<span>  16:</span><span>     <span>for</span> (<span>var</span> i = 0; i </span>

17: { //原点每次下移10个px

<span>  18:</span><span>          context.transform(1,0,0,1,0,10);</span>

<span>  19:</span><span>         context.strokeStyle = colors[i];</span>

<span>  20:</span><span>         context.beginPath();</span>

<span>  21:</span><span>         context.arc(50,100,100,0,Math.PI,<span>true</span>);</span>

<span>  22:</span><span>         context.stroke();</span>

<span>  23:</span><span>     }</span>

transform(m11,m12,m21,m22,dx,dy):改方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算。dx,dy表示原点坐标左移和下移的单位，默认是像素。

该变换矩阵格式如下

m11 m12 dx

m21 m22 dy

0 0 1

最终效果：

总结:坐标变换的方法均可以用transform()代替，规则如下：

1、translate(x,y) transform(1,0,0,1,dx,dy)或transform(0,1,1,0,dx,dy)，前四个参数表示不对图形进行缩放操作。

2、scale(x,y) transform(x,0,0,y,0,0)或transform(0,y,x,0,0,0),后面两个参数表示不进行平移。

3、rotate(angle) transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0)或

transform(-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),0,0)

Canvas入门（3）:图像处理和绘制文字

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

MySQL에서 느린 쿼리를 식별하고 최적화하는 방법은 무엇입니까? (느린 쿼리 로그, Performance_schema)Apr 10, 2025 am 09:36 AM

MySQL 느린 쿼리를 최적화하려면 SlowQueryLog 및 Performance_Schema를 사용해야합니다. 1. SlowQueryLog 및 Set Stresholds를 사용하여 느린 쿼리를 기록합니다. 2. Performance_schema를 사용하여 쿼리 실행 세부 정보를 분석하고 성능 병목 현상을 찾고 최적화하십시오.

MySQL 및 SQL : 개발자를위한 필수 기술Apr 10, 2025 am 09:30 AM

MySQL 및 SQL은 개발자에게 필수적인 기술입니다. 1.MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템이며 SQL은 데이터베이스를 관리하고 작동하는 데 사용되는 표준 언어입니다. 2.MYSQL은 효율적인 데이터 저장 및 검색 기능을 통해 여러 스토리지 엔진을 지원하며 SQL은 간단한 문을 통해 복잡한 데이터 작업을 완료합니다. 3. 사용의 예에는 기본 쿼리 및 조건 별 필터링 및 정렬과 같은 고급 쿼리가 포함됩니다. 4. 일반적인 오류에는 구문 오류 및 성능 문제가 포함되며 SQL 문을 확인하고 설명 명령을 사용하여 최적화 할 수 있습니다. 5. 성능 최적화 기술에는 인덱스 사용, 전체 테이블 스캔 피하기, 조인 작업 최적화 및 코드 가독성 향상이 포함됩니다.

MySQL 비동기 마스터 슬레이브 복제 프로세스를 설명하십시오.Apr 10, 2025 am 09:30 AM

MySQL 비동기 마스터 슬레이브 복제는 Binlog를 통한 데이터 동기화를 가능하게하여 읽기 성능 및 고 가용성을 향상시킵니다. 1) 마스터 서버 레코드는 Binlog로 변경됩니다. 2) 슬레이브 서버는 I/O 스레드를 통해 Binlog를 읽습니다. 3) 서버 SQL 스레드는 데이터를 동기화하기 위해 Binlog를 적용합니다.

MySQL : 쉽게 학습하기위한 간단한 개념Apr 10, 2025 am 09:29 AM

MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템입니다. 1) 데이터베이스 및 테이블 작성 : CreateAbase 및 CreateTable 명령을 사용하십시오. 2) 기본 작업 : 삽입, 업데이트, 삭제 및 선택. 3) 고급 운영 : 가입, 하위 쿼리 및 거래 처리. 4) 디버깅 기술 : 확인, 데이터 유형 및 권한을 확인하십시오. 5) 최적화 제안 : 인덱스 사용, 선택을 피하고 거래를 사용하십시오.

MySQL : 데이터베이스에 대한 사용자 친화적 인 소개Apr 10, 2025 am 09:27 AM

MySQL의 설치 및 기본 작업에는 다음이 포함됩니다. 1. MySQL 다운로드 및 설치, 루트 사용자 비밀번호를 설정하십시오. 2. SQL 명령을 사용하여 CreateAbase 및 CreateTable과 같은 데이터베이스 및 테이블을 만듭니다. 3. CRUD 작업을 실행하고 삽입, 선택, 업데이트, 명령을 삭제합니다. 4. 성능을 최적화하고 복잡한 논리를 구현하기 위해 인덱스 및 저장 절차를 생성합니다. 이 단계를 사용하면 MySQL 데이터베이스를 처음부터 구축하고 관리 할 수 있습니다.

InnoDB 버퍼 풀은 어떻게 작동하며 성능에 중요한 이유는 무엇입니까?Apr 09, 2025 am 12:12 AM

innodbbufferpool은 데이터와 색인 페이지를 메모리에로드하여 MySQL 데이터베이스의 성능을 향상시킵니다. 1) 데이터 페이지가 버퍼 풀에로드되어 디스크 I/O를 줄입니다. 2) 더러운 페이지는 정기적으로 디스크로 표시되고 새로 고침됩니다. 3) LRU 알고리즘 관리 데이터 페이지 제거. 4) 읽기 메커니즘은 가능한 데이터 페이지를 미리로드합니다.

MySQL : 초보자를위한 데이터 관리의 용이성Apr 09, 2025 am 12:07 AM

MySQL은 설치가 간단하고 강력하며 데이터를 쉽게 관리하기 쉽기 때문에 초보자에게 적합합니다. 1. 다양한 운영 체제에 적합한 간단한 설치 및 구성. 2. 데이터베이스 및 테이블 작성, 삽입, 쿼리, 업데이트 및 삭제와 같은 기본 작업을 지원합니다. 3. 조인 작업 및 하위 쿼리와 같은 고급 기능을 제공합니다. 4. 인덱싱, 쿼리 최적화 및 테이블 파티셔닝을 통해 성능을 향상시킬 수 있습니다. 5. 데이터 보안 및 일관성을 보장하기위한 지원 백업, 복구 및 보안 조치.

MySQL에서 인덱스를 사용하는 것보다 전체 테이블 스캔이 더 빠를 수 있습니까?Apr 09, 2025 am 12:05 AM

전체 테이블 스캔은 MySQL에서 인덱스를 사용하는 것보다 빠를 수 있습니다. 특정 사례는 다음과 같습니다. 1) 데이터 볼륨은 작습니다. 2) 쿼리가 많은 양의 데이터를 반환 할 때; 3) 인덱스 열이 매우 선택적이지 않은 경우; 4) 복잡한 쿼리시. 쿼리 계획을 분석하고 인덱스 최적화, 과도한 인덱스를 피하고 정기적으로 테이블을 유지 관리하면 실제 응용 프로그램에서 최상의 선택을 할 수 있습니다.

See all articles