题目内容

HTML5 绘制图像变换对象

题目答案

canvas中的变换有很多种，如缩放、移动、旋转等。

在canvas中，旋转主要用到的方法为「otate(angle)。angle为整数时，顺时针旋转；angle负数时，逆时针旋转。

【例题】旋转对象

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

var myCanvas = document.getEleraentById("myCanvas");

var context = myCanvas.getContext("2d");

//ob j.x/y为长方形在canvas中的位置

//ob j.width/height为长方形的宽局

var obj = {

x : 50,

y : 50，

width:200,

height:200

}

//画出一个长方形

function rotate(){

context.clearRect(0,0,800,800);

context.filStyle = "blue";

context.rotate(Math.PI/20); //给出旋车专角度 context.strokeRect(obj.x,(obj.width,obj.width,obj.height):

context.fillRect(obj.x,obj.y,obj.width,obj.height);

}

rotate();

</script>

</htnil>

HTML5 绘制图像 变换对象