canvas 元素使用 JavaScript 在網頁上繪製圖像，本身就是沒有繪圖能力。
canvas 是一個矩形區域，可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
下面來做幾個範例：
1、填充畫布
JavaScript Code複製內容到剪貼簿
- >
-
<script><span class="string">"text/javascript"</script>>
-
var c=document.getElementById("myCanvas"); >
-
var cxt=c.getContext("2d");
cxt.fillStyle=-
"#ccc";
cxt.fillRect(5,10,150,60); -
//x，y，x，y
-
-
執行如下：
2、取得座標
JavaScript Code
複製內容到剪貼簿
- <script><span>"text/javascript"<span class="string">> <span>
</script>
-
function cnvs_getCoordinates(e){
x=e.clientX; -
y=e.clientY; -
document.getElementById(-
"xycoordinates").innerHTML="Coordinates: ; "," y ")"; }
function
- cnvs_clearCoordinates(){
document.getElementById("xycoordinates"
- ).innerHTML="").innerHTML=""） >
-
XML/HTML Code
複製內容到剪貼簿
- div id=id style="float:left;width:199px;height:99px;border:1px solid>🎠35oonmousemove="cnvs_getCoordinates(event)" onmouseout>div>
div-
id=id 🎜>>div>
- 執行如下：
3、繪製線條、圖形
1）、繪製方格如下：
JavaScript Code
複製內容到剪貼簿
"myCanvas"
width=-
"200""100" style="border:1px solid #c3c3c3;"> >
您的瀏覽器不支援 canvas 標籤.
- <script>"text/javascript"</script>
- >
-
-
var c=document.getElementById("myCanvas"
- ); >
- var cxt=c.getContext("2d");
cxt.moveTo(10,10);
- //x,y 起點
cxt.lineTo(10,50); //x,y
-
cxt.lineTo(50,50); //x,y
-
cxt.lineTo(50,10); //x,y
-
cxt.lineTo(10,10); //x,y
-
cxt.stroke();
-
- 執行如下
-
2）、繪製圓形如下：-
JavaScript Code
複製內容到剪貼簿
-
-
<script><span>"text/javascript"> <li class="alt"> <span>
<span class="string"><span>var c=document.getElementById(<li><span>"myCanvas"<span class="keyword">); >
<span><span class="string">var<span> cxt=c.getContext("2d"<li class="alt"><span>); <span class="keyword">
<span>cxt.fillStyle=<span class="string">"#ccc"<span>;
<li><span>cxt.beginPath(); <span class="string">
<span>cxt.arc(20,20,10,0,Math.PI*2,true<li class="alt"><span>);
<li><span>cxt.closePath(); <span class="keyword">
<span>cxt.fill();
<li class="alt"><span></script>
-
-
執行如下：-
4、繪製漸層
JavaScript Code
複製內容到剪貼簿
width=
- "200""100" style="border:1px solid #c3c3c3;"> >
您的瀏覽器不支援 canvas 標籤.
<script><span>"text/javascript"> <li class="alt"> <span>
<li><span>var c=document.getElementById(<li class="alt"><span>"myCanvas"<span class="string">); >
<span>var<li><span> cxt=c.getContext(<span class="keyword">"2d"<span>); <span class="string">
<span>var<li class="alt"><span> grd=cxt.createLinearGradient(0,0,175,50); <span class="keyword">
<span>grd.addColorStop(0,<span class="string">"#000000"<span>); //黑<li><span> >
<span class="keyword">grd.addColorStop(1,<span>"#FFFFFF"<li class="alt">); <span>//白<span class="string"><> >
<span>cxt.fillStyle=grd; <span class="comment">
<span>cxt.fillRect(5,10,175,50);//x,y,x,y <li><span> <span class="string">
<span></script>
-
執行如下：-
5、圖片
-
JavaScript Code
- 複製內容到剪貼簿
-
-
<script><span>"text/javascript"> <li class="alt"> <span>
<span class="string"><span>var c=document.getElementById(<li><span>"myCanvas"<span class="keyword">); >
<span><span class="string">var<span> cxt=c.getContext("2d"<li class="alt"><span>); <span class="keyword">
<span><span class="string">var<span> img=new<li><span> Image()
<span class="keyword">img.src=<span>"aa.png"<span class="keyword"> <span>
<li class="alt">cxt.drawImage(img,10,20); <span>//x,y <span class="string"> <span>
<li></script>
-
執行如下：
-
以上就是本文的全部內容，希望對大家的學習有所幫助。
原文：
http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html
