<!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）。