Little white canvas questions-CodePudding

Three vertical arrangement of buttons, respectively named "square", "round", "triangle",
Need to make the function: click on the button can display the corresponding graphic on the canvas,

CodePudding user response:

 
& lt; CanvasId canvas id="" width=" 400 "height=" 400 "& gt; & lt;/canvas> & lt; Br> 
& lt; Input type="button" value="https://bbs.csdn.net/topics/square" onclick="square ();"/> 
& lt; Input type="button" value="https://bbs.csdn.net/topics/round" onclick="round ();"/> 
& lt; Input type="button" value="https://bbs.csdn.net/topics/triangle" onclick="trigon ();"/> 
& lt; The script type="text/javascript" & gt; 
Var canvas=document. GetElementById (" canvasId "); 
Var CTX=canvas. GetContext (" 2 d "); 
The function square () {
CTX. FillStyle="# 00 f"; 
CTX. BeginPath (); 
CTX. The rect (100100200200); 
CTX. The fill (); 
} 
The function round () {
CTX. FillStyle="# f00; 
CTX. BeginPath (); 
CTX. Arc (200200120,0,2 * math.h PI, true); 
CTX. The fill (); 
} 
The function trigon () {
CTX. FillStyle="# ff0"; 
CTX. BeginPath (); 
CTX. MoveTo (50, 200); 
CTX. LineTo (50280); 
CTX. LineTo (350280); 
CTX. ClosePath (); 
CTX. The fill (); 
} 
& lt;/script>