canvas介紹
Canvas是HTML5新增的組件，用于在網(wǎng)上繪制圖形，該元素標(biāo)簽的強大之處在于可以直接在HTML上進(jìn)行圖形操作，具有極大的應(yīng)用價值。但canvas本身沒有繪圖能力的，它就像一塊幕布，可以用js在上面繪制各種圖表、動畫等。
在沒有Canvas的年代，繪圖只能借助Flash插件來實現(xiàn)，頁面不得不用JavaScript和Flash進(jìn)行交互。有了canvas，我們就不需要Flash了，直接用JavaScript就可以完成繪制。
canvas用法
”canvas”>你的瀏覽器不支持canvas標(biāo)簽
如果你的瀏覽器支持canvas標(biāo)簽，那么就不會顯示出來，否則就會顯示出來。
var canvas=document.getElementById(“canvas”);
var context=canvas.getContext(“2d”);
Context.fillStyle=”#f00”;
Context.fillReact(0,0,300,300);看到上面的2d，你可能會幻還會有3d，其實是沒有的，僅此一種寫法，不過我相信以后經(jīng)過各位大佬的努力會有的。
Context.lineWidth=6;//定義線條的寬度
Context.strokeStyle=”red”;//定義線條的顏色
Context.moveTo(10,10);//畫圖起始位置
Context.lineTo(10,100);//終止位置
Context.lineTo(“100,100”);//如果沒有再次這只起始位置將從上一次的結(jié)束位置開始劃線
Context.stroke();//開始劃線
注意：如果沒有stroke()函數(shù)，表示還沒有畫圖終止，會不顯示的！所以寫完點必須加上stroke()。漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下是兩種設(shè)置canvas的漸變：
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變當(dāng)我們使用漸變對象必須使用兩種或兩種以上的停止顏色時，用addColorStope()方法制定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0或1。
使用漸變時，設(shè)置fillStyle或stroke的值為漸變，然后繪制形狀。
html>
head>
meta charset='utf-8'>
title>title>
head>
body>
canvas id='myCanvas' width='200' height='100' style='border:1px solid #d3d3d3;'>canvas>
script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,'red');
grd.addColorStop(1,'white');
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
script>
body>
html>圖形為：
下面是一個使用canvas制作一個寫字板的小例子：
先看一下：
聯(lián)系客服
