var context = document.getElementById("myCanvas").getContext("2d"); //旋转45度,和context.rotate(Math.PI / 4)效果一样 context.setTransform(1, 0, 0, 1, 0, 0);//重置矩阵 var angle = Math.PI / 4; var xScale = Math.cos(angle); var ySkew = -Math.sin(angle); var xSkew = Math.sin(angle); var yScale = Math.cos(angle); var xTrans = 200; var yTrans = 200; //context.globalAlpha = 0.8;//全局透明度 //不设置全局透明可以达到一样效果,如果设置全局0.8再设置fillStyle中透明度0.8,最后透明度回事0.8*0.8=0.64 //context.fillStyle = "rgba(255,123,172,0.8)"; //context.globalCompositeOperation = "copy";//合成模式 context.fillStyle = "rgba(255,123,172,1)"; context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans); context.fillRect(0, 0, 100, 100);