我正在学校学习JavaScript的基础知识,现在正在学习canvas。
这是我的代码
canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
offset = canvas.width / 2
function assi() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath()
ctx.moveTo(offset, 0)
ctx.lineTo(offset, offset * 2)
ctx.moveTo(0, offset)
ctx.lineTo(offset * 2, offset)
ctx.stroke()
}
function f(x) {
return Math.pow(2, x) * -1;
}
function draw() {
assi()
ctx.beginPath()
ctx.strokeStyle = "red"
moveTo(offset, f(0) + offset)
for (let x = -offset; x < offset; x++) {
ctx.lineTo(x + offset, f(x) + offset)
}
ctx.stroke()
}
<body onload="draw()">
<canvas height="800" width="800" id="myCanvas"></canvas>
<script src="script.js"></script>
</body>
这是我的问题
在函数f(x)
中,如果我去掉*-1
,它就不画出任何东西;而如果我删除*-1
,它就会画出一些东西?
它可以绘制线性函数,但指数函数会有问题,而不是Math.pow()
的问题,因为如果我使用 1 作为底数,它可以工作(实际上会画出一条线,但是正确的)
需要使用*-1
来将canvas坐标系(从上到下)镜像成笛卡尔坐标系(从下到上)的y轴。