let ctx = document.getElementById("canva").getContext("2d");
图形组合方式的设置
ctx.globalCompositeOperation = "destination-over";//新生成的图像在上方
// 3.设置背景填充色和边框色
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.strokeStyle = "rgba(0,153,255,0.4)";
// 5.设置位移
ctx.translate(150, 150);
旋转只传入一个参数:旋转的角度
// 6.1 地球旋转
ctx.rotate(
((2 * Math.PI) / 60) * time.getSeconds() +
((2 * Math.PI) / 60000) * time.getMilliseconds()
);
var obj = document.getElementById("row");
var ctx = obj.getContext("2d");
ctx.beginPath();
ctx.moveTo(76, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 40);
ctx.lineTo(120, 40);
ctx.lineTo(88, 60);
ctx.lineTo(55, 40);
ctx.lineTo(76, 40);
ctx.fill();
svg 是基于 XML 的矢量图形,canvas 是用脚本绘制的图形, svg 不会失真,canvas 会失真。