HTML 5高次インスタンスのcanvas描画円弧
52240 ワード
最新更新日時:2019年07月14日14:18:12
本文内容:canvas描画円弧
任意の角度の純粋な円弧を描く
かたわく
30°円弧の初期化と描画
いくつかの説明: lineCapセグメント末端のプロパティ、butt-セグメント末端は四角で終わり、round-セグメント末端は円形で終わり、square-セグメント末端は四角で終わりますが、幅とセグメントが同じで、高さがセグメントの厚さの半分の矩形領域が追加されました. arc円弧経路を描画する方法で、開始角度 である.
任意の角度のグラデーション円弧を描く
270°円弧の初期化と描画
半径60°の円弧、グラデーションx軸とy軸の始点と終点の値を以下の表に示します.
ポイント名
30°
90°
180°
270°
360°
グラデーションx始点
-
-
30*Math.sqrt(2)
30*Math.sqrt(2)
-
グラデーションyの始点
-
-
0
0
-
グラデーションx終点
-
-
0
0
-
グラデーションy終点
-
-
30*Math.sqrt(2)*2
30*Math.sqrt(2)
-
円弧パスの開始座標
-
-
–Math.PI/2
-Math.PI/2
-
円弧パス終点座標
-
-
Math.PI - Math.PI/2
Math.PI*3/2 - Math.PI/2
-
360°2色円弧の描画
360°3色円弧を描画
円弧をアニメーションで描画
canvas api詳細
HTMLCanvasElement.getContext()メソッドはcanvasのコンテキストを返します.CanvasRenderingContext 2 Dが持つ属性とメソッドは次のとおりです.プロパティ:canvas、currentTransform、direction、fillStyle、filter、font、globalAlpha、globalCompositeOperation、imageSmoothingEnabled、imageSmoothingQuality、lineCap、lineDashOffset、lineJoin、lineWidth、miterLimitshadowBluer、shadowColor、shadowOffsetX、shadowOffsety、strokeStyle、textAlign、textBaseline 方法:addHitRegion()、arc()、arcTo()、beginPath()、bezierCurveTo()、clearHitRegions()、clearRect()、clip()、closePath()、creaeeImageData()、creaeLinearGradient()、creaeLinearGradient()、creaeRadieRadilGradient()、draaaawFocusIfNeeded()、draawImage()、drawWidgetAssOnrerererereeAsOnrererere2424 方法:addHitRegion()、arc()、arcToc()、arcTo()、arcTo()、beginen()、drawWindow()、ellipse()、fill()、fillRect()fillText()、getImageData()、getLineDash()、isPointInPath()、isPointInStroke()、lineTo()、measureText()、moveTo()、putImageData()、quadraticCurveTo()、rect()、removeHitRegion()、resetTransform()、restore()、rotate()、save()、scale()、scrollPathIntoView()、setLineDash()、setTransform()、stroke()、strokeRect()、strokeText()、transform()、translate()
一般的: ctx.clearRect();//指定矩形領域内のすべての画素が透明になるように設定、前に描画したすべての内容を消去する . ctx.fillRect();//塗りつぶし長方形 を描画する ctx.strokeRect();//現在の描画スタイル を使用 ctx.lineCap;//線端のタイプ ctx.fillStyle;//グラフィックの内部の色とスタイル.デフォルト#000(黒) ctx.strokeStyle;//図の境界線の色とスタイル.デフォルト#000(黒) ctx.beginPath();//クリアサブパスリストは、新しいパス を開始する. ctx.arc();//円弧パス を描画 ctx.stroke();//現在のスタイルの線のサブパス を使用 ctx.drawImage();//指定されたピクチャ を描画する ctx.getImageData();//ImageDataオブジェクト を返します.
参考資料 HTML 5 Canvasで円弧を描く canvasの円弧を描くときの鋸歯感をどのように解決するか、canvasの図をより明確にする方法について.(共有帖) Html 5 Canvasが開発した特定の領域内のCanvasをクリアし、広いテクニックでブラウザウィンドウ全体にCanvasを埋め込む CanvasRenderingContext2D.lineCap-Web APIインタフェースリファレンス|MDN CanvasRenderingContext 2 D-Web APIインタフェースリファレンス|MDN HTML CanvasElement-Web APIインタフェースリファレンス|MDN Canvas-Web APIインタフェースリファレンス|MDN 読んでくれてありがとう、コメントを歓迎します^-^
《 - - 》 本文内容:canvas描画円弧
任意の角度の純粋な円弧を描く
かたわく
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas demotitle>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('myCanvas');// DOM
if (canvas.getContext){
var ctx = canvas.getContext('2d');// canvas
}
}
script>
head>
<body onload="draw();">
<canvas id="myCanvas" width="300" height="300">canvas>
body>
<scritp>script>
html>
30°円弧の初期化と描画
function initCanvas(){
let canvas = document.getElementById("myCanvas")
this.ctx = canvas.getContext("2d");
let width = 140,height = 140;
canvas.width = width;// width={canvaswidth}
canvas.height = height;// height={canvasheight}
// - echarts
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//
this.ctx.lineWidth = 12;//
this.ctx.lineCap = 'round';//
this.ctx.beginPath();// x*(36/180)*Math.PI
this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI/6 - Math.PI/2, false);// 30° context.arc( x ， y ， ， ， ，false /true )
this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
this.ctx.stroke();//
}
いくつかの説明:
-Math.PI/2は12時(ゼロ点)方向任意の角度のグラデーション円弧を描く
270°円弧の初期化と描画
function initCanvas(){
let canvas = document.getElementById("myCanvas")
this.ctx = canvas.getContext("2d");
let width = 140,height = 140;
canvas.width = width;// width={canvaswidth}
canvas.height = height;// height={canvasheight}
// - echarts
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//
this.ctx.lineWidth = 12;//
this.ctx.lineCap = 'butt';
let g = this.ctx.createLinearGradient(30*Math.sqrt(2), 0, 0, 30*Math.sqrt(2));
g.addColorStop(0, 'rgba(252,255,152, 1)');
g.addColorStop(1, 'rgba(252,0,0, 1)');
this.ctx.strokeStyle = g;
this.ctx.beginPath();// x*(36/180)*Math.PI
this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI*3/2 - Math.PI/2, false);
this.ctx.stroke();//
}
半径60°の円弧、グラデーションx軸とy軸の始点と終点の値を以下の表に示します.
ポイント名
30°
90°
180°
270°
360°
グラデーションx始点
-
-
30*Math.sqrt(2)
30*Math.sqrt(2)
-
グラデーションyの始点
-
-
0
0
-
グラデーションx終点
-
-
0
0
-
グラデーションy終点
-
-
30*Math.sqrt(2)*2
30*Math.sqrt(2)
-
円弧パスの開始座標
-
-
–Math.PI/2
-Math.PI/2
-
円弧パス終点座標
-
-
Math.PI - Math.PI/2
Math.PI*3/2 - Math.PI/2
-
360°2色円弧の描画
function initCanvas(){
let canvas = document.getElementById("myCanvas")
this.ctx = canvas.getContext("2d");
let width = 140,height = 140;
canvas.width = width;// width={canvaswidth}
canvas.height = height;// height={canvasheight}
// - echarts
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//
this.ctx.lineWidth = 12;//
this.ctx.lineCap = 'butt';
this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
this.ctx.beginPath();
this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI - Math.PI/2, false);
this.ctx.stroke();
this.ctx.strokeStyle = 'rgba(255,105,180, 1)';
this.ctx.beginPath();
this.ctx.arc(70, 70, 60, Math.PI/2, Math.PI*2 - Math.PI/2, false);
this.ctx.stroke();
}
360°3色円弧を描画
function initCanvas(){
let canvas = document.getElementById("myCanvas")
this.ctx = canvas.getContext("2d");
let width = 140,height = 140;
canvas.width = width;// width={canvaswidth}
canvas.height = height;// height={canvasheight}
// - echarts
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//
this.ctx.lineWidth = 12;//
this.ctx.lineCap = 'butt';
this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
this.ctx.beginPath();
this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI*2/3 - Math.PI/2, false);
this.ctx.stroke();
this.ctx.strokeStyle = 'rgba(255,105,180, 1)';
this.ctx.beginPath();
this.ctx.arc(70, 70, 60, -Math.PI/2 + Math.PI*2/3, Math.PI*4/3 - Math.PI/2, false);
this.ctx.stroke();
this.ctx.strokeStyle = 'rgba(0,255,0, 1)';
this.ctx.beginPath();
this.ctx.arc(70, 70, 60, Math.PI*4/3 - Math.PI/2, Math.PI*2 - Math.PI/2, false);
this.ctx.stroke();
}
円弧をアニメーションで描画
function initCanvas(){
let canvas = document.getElementById("myCanvas")
this.ctx = canvas.getContext("2d");
let width = 140,height = 140;
canvas.width = width;// width={canvaswidth}
canvas.height = height;// height={canvasheight}
// - echarts
if (window.devicePixelRatio) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//
this.ctx.lineWidth = 12;//
this.ctx.lineCap = 'round';//
startAnimate();
}
function startAnimate(){
let _this = this;
let totalScore = 90;// 100 360°
let count = 0;
this.scoreCountTimer = setInterval(function(){
count += 1;
if(count >= totalScore){
count = totalScore
}
// canvas
_this.ctx.clearRect(0, 0, 140, 140);// 00 x y w h
//
_this.ctx.beginPath();// x*(36/180)*Math.PI
_this.ctx.arc(70, 70, 60, -Math.PI/2, (count*Math.PI*2/100) - Math.PI/2, false);/// context.arc(x ，y ， ， ， ，false /true )
_this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
_this.ctx.stroke();//
// ，canvas setState
_this.setState({score: count})
if(count >= totalScore){
clearInterval(_this.scoreCountTimer)
}
},15)
}
canvas api詳細
HTMLCanvasElement.getContext()メソッドはcanvasのコンテキストを返します.CanvasRenderingContext 2 Dが持つ属性とメソッドは次のとおりです.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
一般的:
参考資料
^-^