20-canvas之形变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20-Canvas形变</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 0 auto;
background: red;
}
</style>
</head>
<body>
<canvas width="500" height="400"></canvas>
<script>
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 注意点: 在canvas中所有的形变属性操作的都是坐标系, 而不是图形
// 所以，要先改变坐标系的位置，才能绘制图形，不然，就会失效
// oCtx.translate(100, 0);
// oCtx.translate(0, 100);
// oCtx.translate(100, 100);
// oCtx.rotate(Math.PI/6);
oCtx.scale(0.5, 1);
// 3.绘制一个矩形
oCtx.strokeRect(100, 100, 200, 100);
</script>
</body>
</html> 相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25