婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 使用HTML5 Canvas為圖片填充顏色和紋理的教程

使用HTML5 Canvas為圖片填充顏色和紋理的教程
熱門標簽：杭州營銷電銷機器人供應商 聯通400電話申請 飛亞外呼系統 百應電銷機器人產業 高德地圖標注賓館位置 電視購物電銷外呼系統 西寧智能外呼系統加盟 貸款電銷人工和機器人哪個好 電話機器人如何

填充顏色

藝術離不開色彩，今天咱們來介紹一下填充顏色，體會一下色彩的魅力。
填充顏色主要分為兩種：

1.基本顏色
2.漸變顏色（又分為線性漸變與徑向漸變）

我們一個個來看。


填充基本顏色
Canvas fillStyle屬性用來設置畫布上形狀的基本顏色和填充。fillStyle使用簡單的顏色名稱。這看起來非常簡單，例如:

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "red";  

下面是出自 HTML4 規范的可用顏色字符串值列表，共十六個。由于 HTML5 沒有修改專屬的顏色，HTML4 的顏色都可以在 HTML5 中正確顯示。

所有這些顏色值都可以應用到 strokeStyle 屬性和 fillStyle 屬性中。
好了，我來總結一下填充基本色的方法：（也可用于strokeStyle屬性）
（1） 使用顏色字符串填充。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "red";  

（2）使用十六進制數字字符串填充。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "#FF0000";  

（3）使用十六進制數字字符串簡寫形式填充。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "#F00";  

（4）使用rgb()方法設置顏色。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "rgb(255,0,0)";  

（5）使用rgba()方法設置顏色。
JavaScript Code復制內容到剪貼板

  1. context.fillStyle = "rgba(255,0,0,1)";  

此方法最后一個參數傳遞的是alpha值，透明度范圍為1（不透明）~0（透明）。
（6）使用hsl()方法設置顏色。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "hsl(0,100%,50%)";  

HSL即是代表色相（H），飽和度（S），明度（L）三個通道的顏色。
（7）使用hsla()方法設置顏色。

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = "hsla(0,100%,50%,1)";  

以上7句代碼都是填充"#FF0000"這個紅色。


填充漸變形狀
在畫布上創建漸變填充有兩個基本選項：線性或徑向。線性漸變創建一個水平、垂直或者對角線的填充圖案。徑向漸變自中心點創建一個放射狀填充。填充漸變形狀分為三步：添加漸變線，為漸變線添加關鍵色，應用漸變。下面是它們的一些示例。
線性漸變
三步走戰略：
添加漸變線：

JavaScript Code復制內容到剪貼板
  1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);  


為漸變線添加關鍵色(類似于顏色斷點)：

JavaScript Code復制內容到剪貼板
  1. grd.addColorStop(stop,color);  


這里的stop傳遞的是 0 ~ 1 的浮點數，代表斷點到(xstart,ystart)的距離占整個漸變色長度是比例。

應用漸變：

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = grd;   
  2. context.strokeStyle = grd;  


寫個代碼來看看。

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>填充線性漸變</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.rect(200,100,400,400);   
  22.   
  23.         //添加漸變線   
  24.         var grd = context.createLinearGradient(200,300,600,300);   
  25.   
  26.         //添加顏色斷點   
  27.         grd.addColorStop(0,"black");   
  28.         grd.addColorStop(0.5,"white");   
  29.         grd.addColorStop(1,"black");   
  30.   
  31.         //應用漸變   
  32.         context.fillStyle = grd;   
  33.   
  34.         context.fill();   
  35.   
  36.     }   
  37. </script>   
  38. </body>   
  39. </html>  

運行結果：

我覺得有必要做一個圖解，方便大家一次性理解漸變。

為了方便理解，建議把漸變線看成是一個有向線段。如果熟悉PS等繪圖工具，用過其中的漸變色設置，應該會很好理解。
這里漸變線的起點和終點不一定要在圖像內，顏色斷點的位置也是一樣的。但是如果圖像的范圍大于漸變線，那么在漸變線范圍之外，就會自動填充離端點最近的斷點的顏色。
這里配合兩個補充函數再舉一例。

繪制矩形的快捷方法

JavaScript Code復制內容到剪貼板
  1. fillRect(x,y,width,height)、stroke(x,y,width,height)。這兩個函數可以分別看做rect()與fill()以及rect()與stroke()的組合。因為rect()僅僅只是規劃路徑而已，而這兩個方法確實實實在在的繪制。   
  2. <!DOCTYPE html>   
  3. <html lang="zh">   
  4. <head>   
  5.     <meta charset="UTF-8">   
  6.     <title>填充線性漸變</title>   
  7. </head>   
  8. <body>   
  9. <div id="canvas-warp">   
  10.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  11.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  12.     </canvas>   
  13. </div>   
  14.   
  15. <script>   
  16.     window.onload = function(){   
  17.         var canvas = document.getElementById("canvas");   
  18.         canvas.width = 800;   
  19.         canvas.height = 600;   
  20.         var context = canvas.getContext("2d");   
  21.   
  22.         //添加漸變線   
  23.         var grd = context.createLinearGradient(100,300,700,300);   
  24.   
  25.         //添加顏色斷點   
  26.         grd.addColorStop(0,"olive");   
  27.         grd.addColorStop(0.25,"maroon");   
  28.         grd.addColorStop(0.5,"aqua");   
  29.         grd.addColorStop(0.75,"fuchsia");   
  30.         grd.addColorStop(0.25,"teal");   
  31.   
  32.         //應用漸變   
  33.         context.fillStyle = grd;   
  34.         context.strokeStyle = grd;   
  35.   
  36.         context.strokeRect(200,50,300,50);   
  37.         context.strokeRect(200,100,150,50);   
  38.         context.strokeRect(200,150,450,50);   
  39.   
  40.         context.fillRect(200,300,300,50);   
  41.         context.fillRect(200,350,150,50);   
  42.         context.fillRect(200,400,450,50);   
  43.   
  44.         context.fillRect(0,550,800,25);   
  45.   
  46.     }   
  47. </script>   
  48. </body>   
  49. </html>  

運行結果：

這兩個頁面都是水平漸變，但是要清楚線性漸變不一定是水平的，方向可以是任意的，通過漸變線的端點來設置方向。

徑向漸變
同樣是三步走戰略，只不過是第一步的所用方法變了。
添加漸變圓：

JavaScript Code復制內容到剪貼板
  1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);  

為漸變線添加關鍵色(類似于顏色斷點)：

JavaScript Code復制內容到剪貼板
  1. grd.addColorStop(stop,color);  


應用漸變：

JavaScript Code復制內容到剪貼板
  1. context.fillStyle = grd;   
  2. context.strokeStyle = grd;  


線性漸變是基于兩個端點定義的，但是徑向漸變是基于兩個圓定義的。
我們把示例7-2改寫一下。

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>填充徑向漸變</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         //添加漸變線   
  22.         var grd = context.createRadialGradient(400,300,100,400,300,200);   
  23.   
  24.         //添加顏色斷點   
  25.         grd.addColorStop(0,"olive");   
  26.         grd.addColorStop(0.25,"maroon");   
  27.         grd.addColorStop(0.5,"aqua");   
  28.         grd.addColorStop(0.75,"fuchsia");   
  29.         grd.addColorStop(0.25,"teal");   
  30.   
  31.         //應用漸變   
  32.         context.fillStyle = grd;   
  33.   
  34.         context.fillRect(100,100,600,400);   
  35.   
  36.   
  37.     }   
  38. </script>   
  39. </body>   
  40. </html>  

運行結果：

怎么感覺這個顏色搭配那么的……算了，這個就叫做藝術。
createRadialGradient(x0,y0,r0,x1,y1,r1);方法規定了徑向漸變開始和結束的范圍，即兩圓之間的漸變。
總結一下，這節課我們學習了fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、strokeRect()等屬性和方法，詳細介紹了填充基本色、線性漸變、徑向漸變。
好了，現在學會了上色，那么盡情的使用色彩，繪制出屬于我們自己的藝術品吧！

填充紋理

createPattern()簡介
紋理其實就是圖案的重復，填充圖案通過createPattern()函數進行初始化。它需要傳進兩個參數createPattern(img,repeat-style)，第一個是Image對象實例，第二個參數是String類型，表示在形狀中如何顯示repeat圖案。可以使用這個函數加載圖像或者整個畫布作為形狀的填充圖案。
有以下4種圖像填充類型：

1.平面上重復：repeat;
2.x軸上重復：repeat-x;
3.y軸上重復：repeat-y;
4.不使用重復：no-repeat;

其實createPattern()的第一個參數還可以傳入一個canvas對象或者video對象，這里我們只講解Image對象，其余的大家自己嘗試。


創建并填充圖案
首先看一下怎么加載圖像：

創建Image對象
為Image對象指定圖片源

代碼如下：

JavaScript Code復制內容到剪貼板
  1. var img = new Image();    //創建Image對象   
  2. img.src = "8-1.jpg";    //為Image對象指定圖片源  

擴展：HTML中的相對路徑
'./目錄或文件名' 或者 '目錄或文件名' 是指當前操作的文件所在目錄的路徑
'../目錄或文件名' 是指當前所操作的文件所在目錄的上一級目錄的路徑

之后填充紋理：

JavaScript Code復制內容到剪貼板
  1. var pattern = context.createPattern(img,"repeat");   
  2. context.fillStyle = pattern;  

我們直接看一段完整的程序，這里我要重復填充這個萌萌的長頸鹿作為紋理。需要注意的是，選擇圖片時一定要選擇那種左右互通，上下互通的圖片做為紋理，這樣看上去才不會有不自然的短接處。

下面提供代碼。

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>填充紋理</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         var img = new Image();   
  22.         img.src = "8-1.jpg";   
  23.         img.onload = function(){   
  24.             var pattern = context.createPattern(img, "repeat");   
  25.             context.fillStyle = pattern;   
  26.             context.fillRect(0,0,800,600);   
  27.         }   
  28.   
  29.     }   
  30. </script>   
  31. </body>   
  32. </html>  

運行結果：

這里使用了Image的onload事件，它的作用是對圖片進行預加載處理，即在圖片加載完成后才立即除非其后function的代碼體。這個是必須的，如果不寫的話，畫布將會顯示黑屏。因為沒有等待圖片加載完成就填充紋理，導致瀏覽器找不到圖片。
這里使用了"repeat"，童鞋們也可嘗試使用一下其他三個值，看看會有什么不同的效果。也可以自己找一下其他的圖片嘗試填充，看看效果。

標簽：煙臺 撫州 邯鄲 牡丹江 安慶 玉溪 內蒙古 晉中

巨人網絡通訊聲明：本文標題《使用HTML5 Canvas為圖片填充顏色和紋理的教程》，本文關鍵詞  使用,HTML5,Canvas,為,圖片,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《使用HTML5 Canvas為圖片填充顏色和紋理的教程》相關的同類信息！
  • 本頁收集關于使用HTML5 Canvas為圖片填充顏色和紋理的教程的相關信息資訊供網民參考！
    • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    ...xxx性欧美| 在线精品视频免费播放| 欧美视频一区二区在线观看| 在线看日本不卡| 国产亚洲福利社区一区| 亚洲精品久久久蜜桃| 亚洲视频在线观看三级| 国产日韩亚洲欧美综合| 成人开心网精品视频| 亚洲伦理在线免费看| 欧美午夜精品免费| 高清在线不卡av| 久久成人综合网| 亚洲视频一区二区在线| 欧美电视剧免费全集观看 | 久久夜色精品一区| a级精品国产片在线观看| 亚洲综合色自拍一区| 日本一区二区三区高清不卡| 成人午夜精品在线| 男女男精品网站| 精品污污网站免费看| 国产91丝袜在线18| 久久国产尿小便嘘嘘尿| 午夜激情一区二区三区| 夜夜嗨av一区二区三区网页| 国产精品久久久久久福利一牛影视| 欧美大肚乱孕交hd孕妇| 欧美日韩精品免费观看视频| 岛国一区二区三区| 成人美女视频在线看| 国产精品白丝av| 国产精品一区二区果冻传媒| 奇米精品一区二区三区在线观看一| 亚洲午夜激情av| 亚洲美女电影在线| 亚洲精品视频免费看| 亚洲免费毛片网站| 成人av动漫在线| 天天影视色香欲综合网老头| 国产蜜臀97一区二区三区 | 精品国产sm最大网站免费看| 99久久久久免费精品国产| 亚洲va国产va欧美va观看| 日韩欧美美女一区二区三区| 成人av网在线| 一区二区三区不卡在线观看| 91精品国产综合久久蜜臀| 精品国产凹凸成av人网站| 国产黑丝在线一区二区三区| 99视频超级精品| 18成人在线观看| 粉嫩久久99精品久久久久久夜| 欧美日韩国产大片| 亚洲大尺度视频在线观看| 国产一区视频在线看| 久久精品国产99国产| 日韩一区二区三区视频| 裸体健美xxxx欧美裸体表演| 欧美精品在线观看一区二区| 国产一区二区0| 国产精品不卡在线观看| 国产a视频精品免费观看| 国产肉丝袜一区二区| 99re66热这里只有精品3直播| 亚洲欧美日韩小说| 国产成人午夜精品影院观看视频| 国产麻豆91精品| aaa欧美色吧激情视频| 亚洲国产另类精品专区| 国产日产精品一区| 日韩精品一区二区三区中文精品| 99久久国产综合色|国产精品| 亚洲欧美日韩久久| 136国产福利精品导航| 中文字幕视频一区| 国产精品护士白丝一区av| 日韩欧美激情四射| 欧美一区二区三区在线| 欧美性大战久久久| 成人免费视频一区二区| 视频一区二区欧美| 亚洲人精品一区| 国产免费观看久久| 狠狠色狠狠色合久久伊人| 在线成人小视频| 欧美精品三级在线观看| av亚洲精华国产精华| 激情深爱一区二区| 偷拍日韩校园综合在线| 五月婷婷久久综合| 一区二区三区国产精品| 日韩一级片在线观看| 国产精品夜夜嗨| 国产一区不卡精品| 国产精品亚洲一区二区三区在线 | 麻豆精品一区二区| 欧美精品一区二区三区蜜桃视频 | 6080日韩午夜伦伦午夜伦| 制服丝袜一区二区三区| 国产高清在线精品| a美女胸又www黄视频久久| 国产人成一区二区三区影院| 久草中文综合在线| 99久久免费精品| 欧美日本韩国一区二区三区视频| 日韩欧美www| 国产精品久久久久一区二区三区| 欧美日韩国产在线播放网站| 成人av网址在线观看| 色综合天天综合在线视频| 555www色欧美视频| 日本一区二区在线不卡| 秋霞国产午夜精品免费视频| 国产精品二三区| 欧美成人一区二区三区片免费| 欧美午夜不卡视频| 美女高潮久久久| 免费不卡在线观看| 在线观看国产91| 日本不卡视频在线| 在线亚洲人成电影网站色www| 亚洲午夜精品久久久久久久久| 亚洲成av人片| 欧美一区二区福利在线| 蜜臀av一区二区三区| 国产精品蜜臀在线观看| 欧美群妇大交群中文字幕| 毛片av一区二区| 国产拍欧美日韩视频二区| 91免费国产在线| 欧美一级精品在线| 国产精品素人一区二区| 国产在线精品免费| 日本一区二区成人| 欧美色偷偷大香| 久久电影网电视剧免费观看| 国产欧美一区二区在线| 欧美性色欧美a在线播放| 美女尤物国产一区| 欧美日韩一区二区不卡| 中文字幕在线观看不卡视频| 国产福利不卡视频| 美女网站在线免费欧美精品| 欧美一区日韩一区| 国产精品综合一区二区| 91看片淫黄大片一级| 久久久精品人体av艺术| 青青草91视频| 日韩女优毛片在线| 国产一区二区三区| 欧美国产日韩精品免费观看| 日本三级亚洲精品| 久久99热这里只有精品| 欧美一区二区黄色| 日韩av电影免费观看高清完整版在线观看| 精品欧美一区二区在线观看| 精品国产凹凸成av人网站| 欧美在线制服丝袜| 蜜桃av一区二区| 日本一区二区高清| 91国偷自产一区二区三区成为亚洲经典 | 久久精品72免费观看| 欧美成人综合网站| 欧美精品视频www在线观看| 91美女视频网站| 国产一区高清在线| 中文一区在线播放| 成人国产精品视频| 欧美三级韩国三级日本一级| 亚洲综合色网站| 欧美日韩精品一区二区三区| 国产精品一区一区| 久久久91精品国产一区二区三区| 亚洲777理论| 国产精品福利在线播放| 亚洲国产精品久久久男人的天堂 | 免费人成在线不卡| 国产精品网站导航| 一区二区欧美精品| 久久精品一区八戒影视| 亚洲综合色成人| 日韩电影网1区2区| 99精品在线免费| 欧美性猛片aaaaaaa做受| 欧美日韩夫妻久久| 久久久久一区二区三区四区| 色婷婷综合在线| 国产色综合一区| 亚洲另类在线一区| 国产一区二区三区免费看| 欧美亚洲尤物久久| 精品对白一区国产伦| 欧美无乱码久久久免费午夜一区| 精品视频资源站| 亚洲国产精品自拍| 亚洲另类中文字| 欧美丝袜自拍制服另类| 欧美一区二区视频在线观看2022| 久久综合色天天久久综合图片|