初探canvas

時間 2019-11-19

標籤初探 canvas 简体版

原文原文鏈接

canvas是html5新增的一個專用於圖形處理的標籤，利用canvas能夠實現大部分圖形操做
canvas的一些基本操做與其餘圖形編程工具相似，包含：各類形狀的邊框、路徑繪製和填充，畫布屬性調整，樣式調整等：
1、canvas環境構建
進入html編輯環境便可。
在body中添加canvas標籤
[html]
<body>
<canvas id="canvas1" width="400px" height="200px"></canvas><br />
</body>
這樣就完成了一個canvas的鋪設,但這樣是遠遠不夠的，在運用canvas以前還必須作一些工做，包括變量關聯和上下文的建立
[html]
$(document).ready(
function(){
    var canvas=$("#canvas1"); //變量關聯
    var context=canvas.get(0).getContext("2d"); //建立上下文
    context.clearRect(0,0,400,200); //畫矩形
<span style="white-space:pre"> </span>}
);
2、畫圖的方法有多種，幾種典型方法以下
[html]
context.fillRect(20,20,100,100); //填充
context.strokeRect(130,20,100,100); //邊框
[html]
<span style="white-space:pre"> </span>context.beginPath();
    context.strokeRect(30,100,50,50);//勾畫路徑
    context.closePath();
    context.stroke();//路徑的使用方式
[html]
<span style="white-space:pre"> </span>context.beginPath();
    context.arc(155,125,20,0,Math.PI*1.5,false);//畫圓（扇）
    //context.arc(x,y,radius,開始角度，結束角度,方向是否逆時針)
    context.closePath();
    context.fillStyle="#ffff00";//調整樣式
    context.fill();
[html]
<span style="white-space:pre"> </span>var text="hello world!";
    context.font="35px italic serif";//設置字體屬性
    context.fillText(text,60,100);
[html]
<span style="white-space:pre"> </span>canvas.attr("width",400);//修改畫布大小
    canvas.attr("height",20);
[html]
context.clearRect(0,0,canvas.width(),canvas.height());//修改畫布大小
3、實例，下面提供一個完整的各類canvas基礎應用的demo源碼
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>canvas簡明教程（一）</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script language="javascript">
$(document).ready(
function(){
    init();
}
);
function clear1(){
    var canvas=$("#canvas1"); //變量關聯
    var context=canvas.get(0).getContext("2d");
    context.clearRect(0,0,400,200);
}
function clear2(){
    var canvas=$("#canvas2"); //變量關聯
    var context=canvas.get(0).getContext("2d");
    context.clearRect(0,0,400,200);
}
function clear3(){
    var canvas=$("#canvas3"); //變量關聯
    var context=canvas.get(0).getContext("2d");
    context.clearRect(0,0,400,200);
}
function clear4(){
    var canvas=$("#canvas4"); //變量關聯
    var context=canvas.get(0).getContext("2d");
    context.clearRect(0,0,canvas.width(),canvas.height());
}
function clear5(){
    var canvas=$("#canvas5"); //變量關聯
    var context=canvas.get(0).getContext("2d");
    canvas.attr("width",$(window).get(0).innerWidth);
    canvas.attr("height",$(window).get(0).innerHeight);
    context.fillRect(0,0,canvas.width(),canvas.height());
}
function init(){
    var canvas=$("#canvas1"); //變量關聯
    var context=canvas.get(0).getContext("2d"); //建立上下文，學過MFC圖形處理的應該很熟悉，即在內存中建立一個相匹配的環境
    context.fillRect(20,20,100,100);
    context.strokeRect(130,20,100,100);

    canvas=$("#canvas2");
    var context=canvas.get(0).getContext("2d"); //這一句是必須的，不然繪製結果還停留在前面的元素
    context.beginPath();
    context.moveTo(30,30);
    context.lineTo(300,60);
    context.closePath();
    context.stroke();
    context.beginPath();
    context.strokeRect(30,100,50,50);
    context.closePath();
    context.stroke(); //這個stroke是筆的意思，只繪製
    context.beginPath();
    context.arc(155,125,20,0,Math.PI*1.5,false);
    //context.arc(x,y,radius,開始角度，結束角度,方向是否逆時針)
    context.closePath();
    context.fill();//這個fill是全填充

    canvas=$("#canvas3");
    var context=canvas.get(0).getContext("2d"); //這一句是必須的，不然繪製結果還停留在前面的元素
    context.lineWidth=5;
    context.strokeStyle="#ff0000"; //一經改變永久生效
    context.beginPath();
    context.strokeRect(30,100,50,50);
    context.closePath();
    context.stroke(); //這個stroke是筆的意思，只繪製
    context.beginPath();
    context.arc(155,125,20,0,Math.PI*1.5,false);
    //context.arc(x,y,radius,開始角度，結束角度,方向是否逆時針)
    context.closePath();
    context.fillStyle="#ffff00";
    context.fill();//這個fill是全填充

    canvas=$("#canvas4");
    var context=canvas.get(0).getContext("2d"); //這一句是必須的，不然繪製結果還停留在前面的元素
    var text="hello world!";
    context.font="35px italic serif";
    context.fillText(text,60,100);

    canvas=$("#canvas5");
    var context=canvas.get(0).getContext("2d"); //這一句是必須的，不然繪製結果還停留在前面的元素
    canvas.attr("width",400);
    canvas.attr("height",20);
}
</script>
<style>
body { margin:0 auto;}
canvas {border:red 1px dashed;}
</style>
</head>
<body>
<input type="button" onClick="init()" value="點擊所有重繪" />
<h6>canvas 1 矩形繪製：</h6>
<canvas id="canvas1" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear1()" value="點擊擦掉" />
<h6>canvas 2 路徑繪製：</h6>
<canvas id="canvas2" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear2()" value="點擊擦掉" />
<h6>canvas 3 顏色和線寬調整：</h6>
<canvas id="canvas3" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear3()" value="點擊擦掉" />
<h6>canvas 4 文本繪製：</h6>
<canvas id="canvas4" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear4()" value="點擊擦掉" />
<h6>canvas 5 測試改動一個canva屬性值並抹黑</h6>
<canvas id="canvas5" width="400px" height="20px"></canvas><br />
<input type="button" onClick="clear5()" value="點擊變大並抹黑" />
<br /><br />
<input type="button" onClick="init()" value="點擊所有重繪" /> javascript

</body>
</html> css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。