html如何旋转画布,旋转HTML画布圆圈比例

通过在单个方向上绘制线条然后控制上下文的旋转来绘制比例，使所有这些线条指向不同的角度。

就像你一直朝着同一个方向拿着一把尺子，然后简单地旋转下面的纸叶一样

因此，要控制比例的旋转，您必须在绘制第一行之前设置上下文的旋转(或纸张的叶子)。

＆＃13;

＆＃13;

var ctx = c.getContext('2d');

angle.oninput = function(e) {

ctx.clearRect(0, 0, c.width, c.height);

var rad = angle.value * (Math.PI / 180);

// move the context so its center be at 0,0

ctx.setTransform(1, 0, 0, 1, c.width/2, c.height/2);

// rotate it so we face the required angle

ctx.rotate(rad);

var stepAngle = Math.PI*2 / 14,

innerRad = c.width / 2.8,

outerRad = c.width / 2.5;

ctx.beginPath();

for(var i = 0; i < 12; i++) {

ctx.moveTo(0, innerRad); // move vertically

ctx.lineTo(0, outerRad); // draw line vertically

ctx.rotate(stepAngle); // rotate by fixed increment

}

ctx.stroke(); // all drawn, we can stroke

ctx.setTransform(1, 0, 0, 1, 0, 0); // reset context's position

};

angle.oninput();＆＃13;

＆＃13;＆＃13;＆＃13;

使用您的代码：

＆＃13;

＆＃13;

var degrees = 0;

var color = "lightblue";

var bgcolor = "#222";

var canvas, ctx, W, Htext;

function init_rpm(name, val) {

canvas = document.getElementById(name);

ctx = canvas.getContext("2d");

//dimensions

W = canvas.width;

H = canvas.height;

//Clear the canvas everytime a chart is drawn

ctx.clearRect(0, 0, W, H);

//Background 360 degree arc

ctx.beginPath();

ctx.lineWidth = 25;

ctx.strokeStyle = bgcolor;

ctx.arc(W / 2, H / 2, Math.floor(W / 3), 0.7 * Math.PI, 0.3 * Math.PI, false); //you can see thr src now

ctx.stroke();

//center circle

ctx.beginPath();

ctx.strokeStyle = 'rgba(255, 255, 255, .2)';

ctx.lineWidth = 10;

ctx.arc(W / 2, H / 2, Math.floor(W / 3) - 40, 0.7 * Math.PI, 0.3 * Math.PI, false);

ctx.stroke();

//EDITS BEGIN HERE

// scale

ctx.setTransform(1, 0, 0, 1, 300, 300);

ctx.beginPath();

ctx.lineWidth = 2;

ctx.strokeStyle = 'rgba(255, 255, 255, .3)';

// there should be 10 lines

var stepAngle = (Math.PI * 2) / 10;

// begin angle

ctx.rotate(0.7 * Math.PI);

// draw only 9 of the 10 lines

for (var i = 0; i < 9; i++) {

ctx.moveTo(130, 0);

ctx.lineTo(140, 0);

ctx.rotate(stepAngle);

}

ctx.stroke();

ctx.setTransform(1, 0, 0, 1, 0, 0);

//EDITS END HERE

var percent = val / 8000 * 100;

ctx.beginPath();

ctx.lineWidth = 30;

var my_gradient = ctx.createLinearGradient(0, 150, 250, 300);

my_gradient.addColorStop(0, "#B31918");

my_gradient.addColorStop(1, "#FFA000");

ctx.strokeStyle = my_gradient;

//the arc start from the rightmost end. if we deduct 90 degrees from the angles

//the arc will start from the top most end

ctx.arc(W / 2, H / 2, Math.floor(W / 3), 0.7 * Math.PI, 0.7 * Math.PI + 1.6 * Math.PI / 100 * percent, false); //you can see thr src now

ctx.stroke();

//add text

ctx.fillStyle = color;

ctx.font = "7vh play";

// text=Math.floor(degrees/360*8)+' RPM';

text = degrees / 360 * 8;

text_width = ctx.measureText(text).width;

ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);

ctx.font = "3vh play";

text2 = 'RPM';

ctx.fillText(text2, W / 2 - text_width / 2, H / 2 + 70);

}

function draw(val, name, type) {

// console.log(val);

if (name != "" || name != null) {

if (type == "rpm") {

if (val != "" || val != null) {

degrees = val / 1000 / 8 * 360;

} else {

degrees = 180;

}

init_rpm(name, val);

} else if (type == "kmh") {

if (val != "" || val != null) {

degrees = val;

} else {

degrees = 180;

}

init_kmh(name);

}

} else {

console.log('can not find canvas id');

}

}

$(document).ready(function () {

//canvas init

draw(0, "canvas3", "rpm");

var rpmControl2 = document.querySelector('input[id=get_rpm]');

rpmControl2.addEventListener('input', function () {

draw(this.value, "canvas3", "rpm");

});

});＆＃13;

#canvas2{

display:inline;

}

body{

background:#333;

font-family: 'Play', sans-serif;

}＆＃13;

RPM

＆＃13;＆＃13;＆＃13;