インターンシップ中に、キャンバスを使用して式を描くように言われました。私はあまり多くを言わずに、直接コードを書きました。
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> お使いのブラウザは Canvas をサポートしていません。</canvas></div><script> ウィンドウ。 function () { var Canvas = document.getElementById(canvas); // コンテキストを取得します。 Canvas.getContext(2d); //塗りつぶされた円の描画に使用される関数パラメータは、中心座標、半径、開始位置と終了位置、線の色、および塗りつぶしの色です。 functiondrawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * Math.PI); context.fillStyle = FillColor; context.fill(); // 塗りつぶしを確認します context.drawing() }; // 円弧関数の描画に使用されるデフォルトの線は、塗りつぶしなしで黒になります。座標、半径、開始位置、終了位置 functiondrawsArc(x, y, r, l1, l2) { context.beginPath(); context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI ); context.ストロークスタイル = black; context.blood() }; //目の描画に使用する関数 function darwEyes(x1, y1, a1, b1) { //パラメータは楕円の中心位置コンテキストの長軸と短軸です.ストロークスタイル = #754924 ParamEllipse(context, x1, y1, a1, b1); //楕円関数 ParamEllipse(context, x, y, a, b) { // 各ループで描画されるパス (円弧) を 1 ピクセルに近づけます var step = (a > b) ? 1 / a : 1 / b; context.moveTo(x + a, y); //楕円の左端点から描画を開始 for (var i = 0; i < 2 * Math.PI; i += step) { //パラメータは i で、度 (ラジアン) を示します context.lineTo(x +a* Math.cos(i), y + b * Math.closePath(); context.fill(); }; /facedrawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //左目 context.drawCircle = #754924 darwEyes(116, 130, 18, 25);drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //右目 darwEyes(296, 130, 18, 25); 、127、12、 0, 2, #754924, #F5F5F5); //左の眉を描くArc(100, 100, 50, 1.3, 1.7); //右の眉を描くArc(300, 100, 50, 1.3, 1.7); 200、120、180、0.3、 0.7); }</script></body>レンダリング
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。