在谷歌瀏覽器中顯示效果如下圖，不知道是什么問題，感覺代碼都跟老師的差不多

?

在360瀏覽器中正常顯示，如下圖所示：

代碼如下

var searchLight = {

? ? ? ? x: 400,

? ? ? ? y: 400,

? ? ? ? radius: 150,

? ? ? ? vx: Math.random() * 5 + 10,

? ? ? ? vy: Math.random() * 5 + 10

? ? }

? ? var rot = 0;

? ? var isIncreased = true;

? ? window.onload = function() {

? ? ? ? var canvas = document.getElementById("canvas");

? ? ? ? canvas.width = 800;

? ? ? ? canvas.height = 800;

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

? ? ? ? setInterval(function() {

? ? ? ? ? ? draw(ctx);

? ? ? ? ? ? update(canvas.width, canvas.height);

? ? ? ? ? ? //update2();

? ? ? ? }, 40)

? ? }

? ? function draw(ctx) {

? ? ? ? var canvas = ctx.canvas;

? ? ? ? ctx.clearRect(0, 0, canvas.width, canvas.height)

? ? ? ? ctx.save();

? ? ? ? ctx.beginPath();

? ? ? ? ctx.fillStyle = "black";

? ? ? ? ctx.fillRect(0, 0, canvas.width, canvas.height);

? ? ? ?

? ? ? ? ctx.save();

? ? ? ? ctx.translate(searchLight.x, searchLight.y);

? ? ? ??

? ? ? ? ctx.rotate(rot / 180 * Math.PI)

? ? ? ? ctx.scale(searchLight.radius, searchLight.radius);

? ? ? ? startPath(ctx)

? ? ? ? ctx.fillStyle = "#fff";

? ? ? ? //ctx.arc(searchLight.x, searchLight.y, searchLight.radius, 0, 2 * Math.PI);

? ? ? ? ctx.fill();

? ? ? ? ctx.restore();

? ? ? ? ctx.clip();

? ? ? ? ctx.textAlign = "center";

? ? ? ? ctx.textBaseline = "middle";

? ? ? ? ctx.font = "bold 150px Arial";

? ? ? ? ctx.fillStyle = "#058";

? ? ? ? ctx.fillText("CANVAS", canvas.width / 2, canvas.height / 4);

? ? ? ? ctx.fillText("CANVAS", canvas.width / 2, canvas.height / 2);

? ? ? ? ctx.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);

? ? ? ? ctx.restore();

? ? }

? ? function update(width, height) {

? ? ? ? rot += 1;

? ? ? ? searchLight.x += searchLight.vx;

? ? ? ? searchLight.y += searchLight.vy;

? ? ? ? console.log(searchLight.x, searchLight.y);

? ? ? ? //碰撞檢測

? ? ? ? //右邊

? ? ? ? if (searchLight.x + searchLight.radius >= width) {

? ? ? ? ? ? searchLight.x = width - searchLight.radius;

? ? ? ? ? ? searchLight.vx = -searchLight.vx;

? ? ? ? }

? ? ? ? //左邊

? ? ? ? if (searchLight.x - searchLight.radius <= 0) {

? ? ? ? ? ? searchLight.x = searchLight.radius;

? ? ? ? ? ? searchLight.vx = -searchLight.vx;

? ? ? ? }

? ? ? ? //上邊

? ? ? ? if (searchLight.y - searchLight.radius <= 0) {

? ? ? ? ? ? searchLight.y = searchLight.radius;

? ? ? ? ? ? searchLight.vy = -searchLight.vy;

? ? ? ? }

? ? ? ? //下邊

? ? ? ? if (searchLight.y + searchLight.radius >= height) {

? ? ? ? ? ? searchLight.y = height - searchLight.radius;

? ? ? ? ? ? searchLight.vy = -searchLight.vy;

? ? ? ? }

? ? }

? ? //畫五角星

? ? function startPath(ctx) {

? ? ? ? ctx.beginPath();

? ? ? ? for (var i = 0; i < 5; i++) {

? ? ? ? ? ? ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI), -Math.sin((18 + i * 72) / 180 * Math.PI));

? ? ? ? ? ? ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5, -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5);

? ? ? ? }

? ? ? ? ctx.closePath();

? ? }