<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "height=device-height
Width=device-width,
Initial-scale = 1.0,
Minimum-scale = 1.0,
Maximum-scale = 1.0,
user-scalable = no "/>
<title>Title</title>
<style>
#canvas {
Display:block;
margin:0 Auto;
/*border:1px solid #aaa;
}
</style>
<body>
<canvas id= "Canvas" ></canvas>
</body>
<script>
var canvaswidth=math.min (800,window.innerwidth-20);
var canvasheight=canvaswidth;
var canvas=document.queryselector ("#canvas");
Canvas.width=canvaswidth;
Canvas.height=canvasheight;
var Cx=canvas.getcontext ("2d");
var Ismousedown=false;
var lastloc={x:0,y:0};
var lasttimestamp = 0;
var lastlinewidth =-1;
DrawGrid ();
Write Start function
function Beginstroke (point) {
Ismousedown=true;
Lastloc=windowtocanvas (POINT.X,POINT.Y);
Lasttimestamp = new Date (). GetTime ();
}
Write End Function
function Endstroke () {
Ismousedown=false;
}
Write function functions
function Movestroke (point) {
var Curloc=windowtocanvas (POINT.X,POINT.Y);
var curtimestamp = new Date (). GetTime ();
var s = calcdistance (Curloc,lastloc);
var t = Curtimestamp-lasttimestamp;
var linewidth = calclinewidth (t,s);
Draw
Cx.beginpath ();
Cx.moveto (LASTLOC.X,LASTLOC.Y);
Cx.lineto (CURLOC.X,CURLOC.Y);
Cx.strokestyle= "BLACK";
Cx.linewidth=linewidth;
cx.linecap= "Round";
cx.linejoin= "Round";
Cx.stroke ();
Lastloc = Curloc;
Lasttimestamp=curtimestamp;
Lastlinewidth = linewidth;
}
Canvas.onmousedown=function (e) {
E.preventdefault ();
Beginstroke ({x:e.clientx,y:e.clienty})
};
Canvas.onmouseup=function (e) {
E.preventdefault ();
Endstroke ();
};
Canvas.onmouseout=function (e) {
E.preventdefault ();
Endstroke ();
};
Canvas.onmousemove=function (e) {
E.preventdefault ();
if (Ismousedown) {
Movestroke ({x:e.clientx,y:e.clienty})
}
};
Mobile side
Canvas.addeventlistener (' Touchstart ', function (e) {
E.preventdefault ();
Touch event without client, replace with E.touches.pagex;
Touch = e.touches[0];//First finger
Beginstroke ({x:touch.pagex,y:touch.pagey})
});
Canvas.addeventlistener (' Touchmove ', function (e) {
E.preventdefault ();
touch = e.touches[0];
Movestroke ({x:touch.pagex,y:touch.pagey})
});
Canvas.addeventlistener (' Touchend ', function (e) {
E.preventdefault ();
Endstroke ();
});
var maxlinewidth = 30;
var minlinewidth = 1;
var maxstrokev = 10;
var minstrokev = 0.1;
Speed Change stroke thickness function (brush character effect, not perfect), the above parameters can be deployed, this effect requires a certain mathematical skills, can not use this function, write words can also see.
function Calclinewidth (t,s) {
var v = s/t;
var resultlinewidth;
if (V<=minstrokev)
Resultlinewidth=maxlinewidth;
else if (V>=maxstrokev)
Resultlinewidth=minlinewidth;
Else
resultlinewidth=maxlinewidth-(V-minstrokev)/(Maxstrokev-minstrokev) * (maxlinewidth-minlinewidth);
if (lastlinewidth = =-1)
return resultlinewidth;
Change the ratio of resultlinewidth and lastlinewidth to change the smoothness of strokes
return RESULTLINEWIDTH*1/3 + LASTLINEWIDTH*2/3;
}
The distance function between the current point and the previous point when you move
function Calcdistance (LOC1,LOC2) {
Return Math.sqrt ((loc1.x-loc2.x) * (loc1.x-loc2.x) + (LOC1.Y-LOC2.Y) * (LOC1.Y-LOC2.Y));
}
The coordinate function of the mouse on the canvas
function Windowtocanvas (x, y) {
var bbox=canvas.getboundingclientrect ();
return {X:math.round (x-bbox.left), Y:math.round (Y-bbox.top)}
}
Draw Grid functions
function DrawGrid () {
Cx.save ();
Cx.strokestyle = "Red";
Cx.beginpath ();
Cx.moveto (3, 3);
Cx.lineto (canvas.width-3, 3);
Cx.lineto (canvas.width-3, canvas.height-3);
Cx.lineto (3, canvas.height-3);
Cx.closepath ();
Cx.linewidth = 6;
Cx.stroke ();
Cx.beginpath ();
Cx.moveto (0, 0);
Cx.lineto (Canvas.width, canvas.height);
Cx.moveto (canvas.width, 0);
Cx.lineto (0, canvas.height);
Cx.moveto (CANVAS.WIDTH/2, 0);
Cx.lineto (CANVAS.WIDTH/2, canvas.height);
Cx.moveto (0, CANVAS.HEIGHT/2);
Cx.lineto (Canvas.width, CANVAS.HEIGHT/2);
Cx.linewidth = 1;
Cx.stroke ();
Cx.restore ();
}
</script>
Canvas WordPad for web-side and Mobile (first edition)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
