Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

For the sixth installment of the series, this time it’s about Using Canvas to Implement artboards.

  • The first issue of stick figure five Wu 5T5 directions: juejin.cn/post/702080…
  • The second phase of CSS painting small TV directions: juejin.cn/post/702080…
  • The third mouse becomes five directions to enlightenment: juejin.cn/post/702117…
  • The fourth small TV follows the mouse in jump: juejin.cn/post/702155…
  • # 5 Make multiple balls jump: juejin.cn/post/702210…

This time, I woke up at noon on A Saturday. I was trying to wake up from a daze. Suddenly I was refreshed

The HTML section provides a UI interface for modifying colors, clearing content, and saving screenshots as images

<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>
Copy the code

The CSS section mainly provides CSS style Settings for the interface – artboard, action interface, if any screenshots exist

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;
}
Copy the code

The rest is the most important JS part, which provides drawing ability through canvas API when painting, modiates corresponding variables when selecting colors, and takes screenshots of the whole Canvas element when clicking the save button

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;
}

// Select the color
function changeColor(color,ele){// where ele is passed this, if this is not passed on the next line, it points to the window
    $(ele).addClass("spe").siblings().removeClass("spe");
    context.strokeStyle=color;
       
}
// Select the size
function changeLine(line,ele){
    $(ele).addClass("c_spe").siblings().removeClass("c_spe");
    context.lineWidth=line;
}
/ / drawing
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;
        vary=e.pageY-canvas.offsetTop; context.lineTo(x,y); context.stroke(); }}function stopDrawing(){
    isDrawing=false;
}
function clearCanvas(){
    context.clearRect(0.0,canvas.width,canvas.height);
}

/ / save
// var url=canvas.toDataURL();
function saveCanvas(){
    document.getElementById("img").src=canvas.toDataURL();
     $('img').attr(' SRC ', canvas.todataurl ()
    $("img").css("display"."block");
}
Copy the code