<!DOCTYPE html>
<html>
<head>
<title>h5構建基本的畫圖程序</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
.toolbar{
width:auto;height:140px;
text-align: center;
float:left;
margin-left: 100px;
font-family: 'Trebuchet MS';
font-size: 18px;
font-variant: small-caps;
}
.toolbar img {
background-size: 100%;
background-repeat: no-repeat;
width:80px;height:80px;
margin-left: 5px;
border:1px #ccc groove;
}
.CanvasContainer {
clear: both; margin-left: 100px;
}
canvas {
border: 1px solid #7B899B;
}
.Toolbar{
float:right;
margin-top: -400px;
font-family: '微軟雅黑';
font-size: 18px;
font-variant: small-caps;
margin-right: 50px;
}
img:hover {
border: 2px groove red;
background: white;
}
img.Selected {
border: 2px groove red;
}
#savedCopyContainer {
display: none;
}
#savedCopyContainer img:hover{
border:none;
}
#savedCopyContainer img {
width: 250px;
height: 150px;
}
</style>
</head>
<body>
<div class="toolbar">
- 請選擇筆的顏色 -<br><br>
<img id="redpen" src="img/red.jpg" alt="red pen" onclick="changeColor('rgb(212,21,29)',this)">
<img id="yellowpen" src="img/yellow.jpg" alt="yellow pen" onclick="changeColor('rgb(254,251,3)',this)">
<img id="greenpen" src="img/green.jpg" alt="green pen" onclick="changeColor('rgb(0,255,0)',this)">
<img id="clearca" src="img/clear.jpg" alt="clear" onclick="changeColor('rgb(255,255,255)',this)">
</div>
<div class="toolbar">
- 請選擇筆的粗細 -<br><br>
<img src="img/thickone.jpg" alt="Thin Pen" onclick="changeThickness(2, this)">
<img src="img/thicktwo.jpg" alt="Medium Pen" onclick="changeThickness(7, this)">
<img src="img/thickthree.jpg" alt="Thick Pen" onclick="changeThickness(12, this)">
</div>
<div class="CanvasContainer">
<canvas id="drawingCanvas" width="740" height="300"></canvas>
</div>
<div class="Toolbar">
- 選項 -<br>
<button onclick="saveCanvas()">保存當前繪圖</button>
<button onclick="clearCanvas()">清除當前繪圖</button>
<div id="savedCopyContainer">
<img id="savedImageCopy"><br>
繪圖正在保存中 ...
</div>
</div>
</body>
<script type="text/javascript">
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("drawingCanvas"); //取得canvas和繪圖上下文
context = canvas.getContext("2d");
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmouseout = stopDrawing; //添加用於實現實現繪圖操作的事件處理程序
canvas.onmousemove = draw;
};
var previousColorElement; //記錄此前爲選擇顏色而被單擊過得《img》元素
function changeColor(color,imgElement){ //重新設置當前畫筆的顏色
context.strokeStyle = color;
imgElement.className = "Selected";
if(previousColorElement !=null)//恢復上一次被單擊的《img》元素
previousColorElement.className = "";
previousColorElement = imgElement;
}
var previousThicknessElement//記錄此前爲選擇粗細而被單擊過得《img》元素
function changeThickness(thickness,imgElement){//重新設置當前畫筆的顏色
context.lineWidth = thickness;
imgElement.className = "Selected";
if(previousThicknessElement !=null)//恢復上一次被單擊的《img》元素
previousThicknessElement.className = "";
previousThicknessElement = imgElement;
}
var isDrawing = false;//將該變量設置爲false，爲創建新路徑做準備
function startDrawing(e){//開始繪圖，創建新的路徑
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft,e.pageY - canvas.offsetTop);
//把鼠標放在當前位置上，記錄鼠標當前的座標
}
function draw(e){//記錄鼠標的新位置
if(isDrawing ==true){
var x = e.pageX - canvas.offsetLeft;//記錄鼠標新的座標位置
var y = e.pageY - canvas.offsetTop;
context.lineTo(x,y);//畫一條新線
context.stroke();
}
}
function stopDrawing(){
isDrawing = false;
}
function clearCanvas(){//清除畫布內容
context.clearRect(0,0,canvas.width,canvas.height);
}
function saveCanvas() { //保存畫布內容
var imageCopy = document.getElementById("savedImageCopy");
imageCopy.src = canvas.toDataURL("img/jpeg"); // 設置其保存的位置
var imageContainer = document.getElementById("savedCopyContainer");
imageContainer.style.display = "block";//將圖像顯示出來
}
</script>
</html>寫完代碼，看看效果如何：
在繪圖之前是這樣的，畫完之後便是這樣的：
好了就是這樣的，好像有畫的有點醜的樣子。
最後用到的知識點基本都是canvas最基礎的繪圖方法極其屬性。
- moveTo（）：找到直線的起點，一般以左上角爲（0,0）
- lineTo（）：用於在起點與重點之間建立聯繫。
- stroke（）：用於把直線實際的繪製出來。
- lineWidth：用於設置線條的粗細，該代碼便是利用傳參，改變線條的粗細。
- strokeStyle：用來設置線條的顏色，本代碼也是通過傳參數，來改變線條的顏色，它可以使用html顏色編碼，以及rgb（）函數。
- lineCap：可以設置線條兩端的形狀，默認是butt（方頭），還有round（圓頭），square（長方形頭）。
- closePath（）：給封閉的圖形填充顏色。
- fillStyle：想要填充的顏色。
- fill（）：用於實際的把填充色畫出來。
- fillRect（）：用來直接繪製矩形，設置其寬高即可，用fillStyle取顏色，如：fillRect（0,10,100,200）
- strokeRect（）：也可以用來繪製矩形，寬度取自lineWidth，如：strokeRect（0,10,100,200）。