注册登录

H5 canvas实现画板+保存 

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="cho1.css">
    <script src="jquery.js"></script>
    <script src="cho1.js"></script>
</head>

<body>
<div class="content">
    <div class="tip">
        <span class="s1" onclick="changeColor('red',this)"></span>
        <span class="s2" onclick="changeColor('yellow',this)"></span>
        <span class="s3" onclick="changeColor('green',this)"></span>
        <i class="i1" onclick="changeLine(10,this)"></i>
        <i class="i2" onclick="changeLine(20,this)"></i>
        <i class="i3" onclick="changeLine(30,this)"></i>
        <button onclick="clearCanvas()">clear</button>
        <button onclick="saveCanvas()">save</button>
    </div>
   <canvas width="500px" height="500px" id="draw"></canvas>
   <img id="img">
</div>
</body>
</html>
知识兔
canvas{
    border: 1px solid black;
}
.tip{
    height: 30px;
    width: 500px;
    margin-top: 10px;
}
.s1{
    height: 20px;
    width: 20px;
    background: red;
}
.s2{
    height: 20px;
    width: 20px;
    background: yellow;
}
.s3{
    height: 20px;
    width: 20px;
    background: green;
}
span{
    margin-left: 10px;
    display: inline-block;
    cursor: pointer;
} 
i{
    border-radius: 50%;
    background: black;
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.i1{
    height: 10px;
    width: 10px;
}
.i2{
    height: 15px;
    width: 15px;
}
.i3{
    height: 20px;
    width: 20px;
}
.spe{
    border: 1px solid black;
}
.c_spe{
    background-color: gray;
}
button{
    margin-left: 15px;  
}
img{
    height: 200px;
    width: 300px;
    display: none;
    border: 1px solid rebeccapurple;
}
知识兔
var canvas;
var context;

window.onload=function(){
    canvas=document.getElementById("draw");
    context=canvas.getContext("2d");

    canvas.onmousedown=startDrawing;
    canvas.onmouseup=stopDrawing;
    canvas.onmouseout=stopDrawing;
    canvas.onmousemove=draw;
}


// //颜色改变
// var pcElement;
// function changeColor(color,element){
//     context.strokeStyle=color;

//     if(pcElement!=null){
//         pcElement.className=""; 
//     } 
//     pcElement=element;
// }

//选择颜色
function changeColor(color,ele){//这里的ele传的是this，若不传直接在下一行用this的话是指向window的
    $(ele).addClass("spe").siblings().removeClass("spe");
    context.strokeStyle=color;
       
}
//选择大小
function changeLine(line,ele){
    $(ele).addClass("c_spe").siblings().removeClass("c_spe");
    context.lineWidth=line;
}
//绘图
var isDrawing=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);
}

//保存
// var url=canvas.toDataURL();
function saveCanvas(){
    document.getElementById("img").src=canvas.toDataURL();
     // $('img').attr('src',canvas.toDataURL()) js和jQuery实现控制src的两种方式
    $("img").css("display","block");
}
知识兔
计算机