《canvas》是從2005年10月3日開始放映的24集日本動畫，由F&C ZEXCS製作發行，講述了擁有超人的繪畫天分的男主角的故事。
基本介紹
- 外文名：Canvas
- 日文名：虹色のスケッチ
- 製作·發行：F&C ZEXCS
- 放映日期：2005年10月3日
- 總共集數：24
- 國家：日本
劇情簡介,登場人物,各集標題,STAFF,CAST、,歌曲,·OP,·ED,·角色歌,HTML5新增標籤,<canvas> 的歷史,SVG 以及VML之間的差異,使用 <canvas> 標記繪圖,Canvas 對象的屬性,Canvas 對象的方法,
劇情簡介
擁有超人的繪畫天分的男主角，卻因某事故無法再次執起畫筆，只能委身於某所大學，擔任美術課的顧問。受男主角指導走向繪畫之路的女主角，卻因目睹雙親車禍身亡的現場，而在作畫中無法使用紅色。青梅竹馬的女伴，可是高中時代的告白，卻遭到男主角的拒絕，現在她又重新闖入了男主角的生活。 偶然的再會…… 三人之間，會發生什麼？愛的前路，會走向哪裡？
登場人物
上倉浩樹 CV:櫻井孝宏 美術系的名門，撫子學院的大學生，以教師為目標。一直因具有畫家潛質而被給予厚望，但卻由於某事件而失去了執筆的條件。後來擔任高等部的美術部顧問代理，與各自有著不同想法的女主角們交流而逐漸找回自我。 |  |
 鳳仙 愛麗斯 | |
 | |
 | |
 | |
 柳慎 一郎 | |
 衫原紫衣 | |
 鷺之宮紗綾 | |
 藤浪朋子 |
各集標題
第一話：禁斷的古典紅
第二話：橘子色的再會
第三話：惡作劇的金黃
第四話：焦躁的深藍色
第五話：嘆息的月灰色
第六話：誘惑的翡翠綠
第七話：起潮的土茶色
第八話：哀愁的深夜色
第九話：感傷的琉璃色
第十話：追憶的雪白色
第十一話：淺黃色的距離
第十二話：天真的常青綠
第十三話：深棕色的三角戀
第十四話：秘密是深藍色
第十五話：藍色的壓力
第十六話：淡紫色的通宵長夜
第十七話：想要傳達的櫻粉色
第十八話：瞄準番茄紅
第十九話：奶白色的一夜
第二十話：橘子醬色的黃昏
第二十一話：水晶色的白地圖
第二十二話：紫藍色的黎明
第二十三話：聖誕色的決意
第二十四話：七彩的終章
STAFF
監 督：川崎逸朗
系列構成：吉田玲子
角色設定：新田靖成
色彩設定：片山由美子
美術監督：近藤あゆみ
攝影監督：近藤靖尚
編 集：內田惠
音樂製作：かなすぎはじめ
音響監督：岩浪美和
音響製作：ダックスプロダクション
動畫製作：ゼクシズ
制 作：キャンバス2製作委員會
CAST、
上倉浩樹：櫻井孝宏
鳳仙愛莉絲：名冢佳織
桔梗霧：生天目仁美
荻野可奈：德永愛
美咲堇：平野綾
杉原紫衣：宮川美保
鷺之宮紗綾：豬口有佳
柳慎一郎：谷山紀章
田丸光：伊藤靜
竹內麻巳：豐口惠
藤浪朋子：高橋美佳子
歌曲
·OP
「プラスチックスマイル(虹色ギターVERSION)」
作詞：A Bone
作曲：A Bone
編曲：YASHICHI
歌：Honey Bee（YURIA）
·ED
「NA NA IRO」
作詞：かなすぎはじめ
作曲：かなすぎはじめ、小池雅也
編曲：小池雅也
歌：スイーツ探検隊
·角色歌
1、「いつもとなりに～ニーソックス履いて～」
作詞：かなすぎはじめ
作曲：藤間仁
編曲：小池雅也、津田考平
歌：名冢佳織×スイーツ探検隊
2、「なつかしい風～ホワイトブレス～」
作詞：かなすぎはじめ、新堂真弓
作曲：菊田大介
編曲：Blasterhead
歌：生天目仁美×スイーツ探検隊
HTML5新增標籤
定義和用法：
Canvas 對象表示一個 HTML 畫布元素 -<canvas>。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。
你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的getContext() 方法並且把直接量字元串 "2d" 作為唯一的參數傳遞給它而獲得的。
<canvas> 標記在 Safari 1.3 中引入，在製作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 標記及其 API 可以使用位於excanvas點sourceforge點net的 ExplorerCanvas 開源項目來模擬。
提示：如果希望學習如何使用 <canvas> 來繪製圖形，可以訪問 Mozilla 提供的Canvas 教程（英文）以及相應的中文 Canvas 教程。
<canvas> 的歷史
這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。
<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在於，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，並且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。
我們甚至可以在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。
<canvas> 的標準化的努力由一個 Web 瀏覽器廠商的非正式協會在推進，目前 <canvas> 已經成為 HTML 5 草案中一個正式的標籤。
SVG 以及VML之間的差異
<canvas> 標記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 <canvas> 標記中移除元素，往往需要擦掉繪圖重新繪製它。
使用 <canvas> 標記繪圖
大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的getContext() 方法獲得的一個“繪圖環境”對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字元串，比如調用 beginPath() 和 arc() 方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
注釋：Canvas API 非常緊湊的一個原因上它沒有對繪製文本提供任何支持。要把文本加入到一個 <canvas> 圖形，必須要么自己繪製它再用點陣圖圖像合併它，或者在 <canvas> 上方使用 CSS 定位來覆蓋 HTML 文本。
Canvas 對象的屬性
height 屬性
畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
width 屬性
畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。
Canvas 對象的方法
| 方法 | 描述 |
|---|---|
getContext() | 返回一個用於在畫布上繪圖的環境。 |
例子
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
