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