html5 canvas 怎么让矩形倾斜如图

想法是建立一个矩形让其倾斜然后加两个圆

但是试了rotate 感觉好难调啊顿时觉得自己方法有问题 html5 应该不会有这么蠢的方法

我的代码是

cxt.rotate(-35*Math.PI/180);

cxt.fillStyle="#fff";

cxt.fillRect(10,250,120,60); //这个10 250根本不是图像上的那个坐标但是他绘制出来的确实又是这样

cxt.fillStyle="#87aee5";

cxt.beginPath();

cxt.arc(125,280,30,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

一个西安男人 1年前已收到1个回答举报

jinming7981 幼苗

共回答了20个问题采纳率：95% 举报

html:

CSS:#c{
background-color:rgba(134, 179, 225, 1);
}JS:
window.onload = init;
var ctx = null;
var recX = 150,
recY = 150,
angle = -35;

function init() {
var cvs = document.getElementById('c');
ctx = cvs.getContext('2d');

drawRectangle();
drawCircle(-100, 0, 50, '#fff');
drawCircle(100, 0, 50, 'rgba(134, 179, 225, 1)');
}

function setPos() {
ctx.translate(recX, recY);
ctx.rotate(angle * Math.PI / 180);
}

function drawRectangle() {
ctx.save();
setPos();
ctx.fillStyle = '#fff';
ctx.fillRect(-100, -50, 200, 100);
ctx.restore();
}

function drawCircle(x, y, r, fillStyle) {
ctx.save();
ctx.beginPath();
setPos();
ctx.fillStyle = fillStyle;
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.restore();
}

1年前

可能相似的问题

你能帮帮他们吗

精彩回答

html5 canvas 怎么让矩形倾斜 如图

html5 canvas 怎么让矩形倾斜如图