Während meines Praktikums wurde ich gebeten, einen Ausdruck auf Leinwand zu zeichnen. Ich sagte nicht viel und ging direkt zum Code über.
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> Ihr Browser unterstützt kein Canvas </canvas></div><script> window function () { var canvas = document.getElementById(canvas); canvas.width = 400; //Kontext abrufen var context = canvas.getContext(2d); // Die zum Zeichnen eines gefüllten Kreises verwendeten Funktionsparameter sind Mittelpunktkoordinaten, Radius, Start- und Endposition, Linienfarbe und Füllfarbe function drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * Math.PIstyle = lineColor); context.fillStyle = FillColor; context.fill(); //Die zum Zeichnen einer Bogenfunktion verwendete Standardlinie ist schwarz. Die Parameter sind: Mitte x-Koordinate, Mitte y Koordinate, Radius, Startposition, Endposition Funktion drawsArc(x, y, r, l1, l2) { context.beginPath(); context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI ); context.StrokeStyle = black; context.Stroke(); }; Funktion zum Zeichnen von Augen function darwEyes(x1, y1, a1, b1) { //Die Parameter sind die lange Achse und die kurze Achse des Ellipsenmittelpunkts .strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); //Ellipse function ParamEllipse(context, x, y, a, b) { //Den in jedem Zyklus gezeichneten Pfad (Bogen) auf etwa 1 Pixel einstellen. var step = (a > b) ? context.beginPath(x + a, y) ; //Beginnen Sie mit dem Zeichnen vom linken Endpunkt der Ellipse für (var i = 0; i < 2 * Math.PI; i += step) { //Der Parameter ist i und gibt den Grad (Bogenmaß) an context.lineTo(x + ein * Math.cos(i), y + b * Math.sin(i)); /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //Linkes Auge context.StrokeStyle = #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //rechtes Auge darwEyes(296, 130, 18, 25); , 127, 12, 0, 2, #754924, #F5F5F5); //Linke Augenbraue draws(100, 100, 50, 1.3, 1.7); //Rechte Augenbraue drawsArc(300, 100, 50, 1.3, 1.7); 200, 120, 180, 0,3, 0,7); </script></body>Darstellungen
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.