TOP

canvas一周一練 -- canvas基礎學習(一)
2017-10-10 16:46:47 】 瀏覽:10209
Tags:

從上個星期開始,耳朵就一直在生病,里面長了個疙瘩,腫的一碰就疼,不能吃飯不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天氣炎熱,一定要注意防暑上火,病來如山倒呀~  

接下來我正在喝著5塊一顆的藥學習canvas……

canvas(畫布)是html5新增的標簽元素优乐棋牌app下载,用來定義圖形优乐棋牌app下载,比如圖表和其他圖像。<canvas>標簽只是圖形容器,必須使用腳本(通常為java script)來繪制圖形。

canvas與svg的區別  

canvas是HTML5提供的新元素<canvas>,而svg存在的歷史要比canvas久遠,已經有十幾年了。svg并不是html5專有的標簽,最初svg是用xml技術(超文本擴展語言,可以自定義標簽或屬性)描述二維圖形的語言。
首先,從它們的功能上來講,canvas可以看做是一個畫布。其繪制出來的圖形為標量圖,因此优乐棋牌app下载,可以在canvas中引入jpg或png這類格式的圖片,在實際開發中,大型的網絡游戲都是用canvas畫布做出來的,并且canvas的技術現在已經相當的成熟。
另外,我們喜歡用canvas來做一些統計用的圖表,如柱狀圖曲線圖或餅狀圖等。而svg,所繪制的圖形為矢量圖,所以其用法上受到了限制。因為只能繪制矢量圖,所以svg中不能引入普通的圖片,因為矢量圖的不會失真的效果,在項目中我們會用來做一些動態的小圖標。
但是由于其本質為矢量圖,可以被無限放大而不會失真,這很適合被用來做地圖,而百度地圖就是用svg技術做出來的。
另外從技術發面來講canvas里面繪制的圖形不能被引擎抓取,如我們要讓canvas里面的一個圖片跟隨鼠標事件:canvas.onmouseover=function(){}。而svg里面的圖形可以被引擎抓取,支持事件的綁定。
另外canvas中我們繪制圖形通常是通過java script來實現,svg更多的是通過標簽來來實現,如在svg中繪制正矩形形就要用<rect>,這里我們不能用屬性style="width:XXX;height:XXX;"來定義。
我再來介紹一個svg的js庫:TWO.JS。其中包含two.js和three.js前者用于繪制二維圖形,后者用于繪制三維圖形。TWO.JS可以支持三種格式,svg(默認)、canvas、和WEBGL。當然也可以在普通div中引入。
要從同一圖形的一個<canvas>標記中移除元素,需要擦掉重新繪制;而svg很容易編輯,只要從其描述中移除元素即可。
以上是之前在別人博客中看到的,所以先引用過來,待之后熟練掌握canvas,svg再寫自己的心得體會。
具體請參考 http://blog.csdn.net/helloword_chen/article/details/49788309


1、基本語法
<canvas id="canvasMain" width="800" height="600" >
    您的瀏覽器不支持canvas
</canvas>

當沒有設置寬度和高度的時候,canvas會初始化寬度為300px和高度為150px;當瀏覽器不支持canvas標簽的時候,會顯示其中的文字。

在canvas坐標體系中,以左上角為坐標原點,向右為x軸正方向,向下為y軸正方向,如下圖:

進行繪制需要獲取canvas的上下文環境context,之后調用API進行圖像繪制

var canvas = document.getElementById("canvasMain"),
    ctx = canvas.getContext("2d");

 替換內容是在不支持<canvas>標簽的瀏覽器中展示的。也可以通過檢測getContext()方法的存在來判斷是否支持(有些瀏覽器會為html規范之外的元素創建默認的html元素對象)

var canvas = document.getElementById("canvasMain");
if(canvas.getContext("2d")) {
    var ctx = canvas.getContext("2d");