作业帮 > 综合 > 作业

html5 canvas 怎么让矩形倾斜如图

来源：学生作业帮编辑：搜搜做题作业网作业帮分类：综合作业时间：2024/05/12 09:17:53

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

但是试了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();

html:<canvas id="c" width="400px" height="400px">not support</canvas>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();
}

如何计算html5中canvas绘制一个图形所需的时间? 如果给出二分二至的图,让画出地球上地轴的倾斜方向,我怎么去判断? ps怎样画倾斜的矩形框我的CAD画矩形的时候怎么是倾斜的,不是要正交的吗,怎么设置? 如图，自卸车车厢的一个侧面是矩形ABCD，AB=3米，BC=0.5米，车厢底部距离地面1.2米．卸货时，车厢倾斜的角度θ 怎么能让椅子靠背向后倾斜扶手也向后移动但角度不变请教下各位怎么把下面这个橙色的两个矩形和褐色矩形的边界距离相等呢?如上图所示,怎么让红线的区域距离相等呢 LOST CANVAS 什么意思如图,在一个矩形ABCD(AB 如图,大烧杯内盛有一定量的水,让大烧杯倾斜,使水刚好到杯口,在杯口下面放一只质量为0.5N的小烧杯. 如图,在一个直角三角形的内部做一个矩形ABCD,怎么做图才能使矩形面积最大直角三角形直边为30,40 怎样在CAD中画一个倾斜的矩形

html5 canvas 怎么让矩形倾斜 如图

html5 canvas 怎么让矩形倾斜如图