canvas画图小例子
程序员文章站
2022-03-20 13:05:14
...
<!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>
---------------------
作者：黛梨
来源：CSDN
原文：https://blog.csdn.net/pedrojuliet/article/details/64121971
版权声明：本文为博主原创文章，转载请附上博文链接！