【图像】
【代码】
<!DOCTYPE html
[/span>html lang="utf-8"
[/span>meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
[/span>head
[/span>title
[/span>style type="text/css"
.centerlize{
margin:0 auto;
border:0px solid red;
Width＜/span>:1200px;Height＜/span>:600px;
}//代码效果参考：http://www.ezhiqi.com/zx/art_5582.html
[/span>body onload="draw();"
[/span>div class="centerlize"
[/span>canvas id="myCanvas" Width＜/span>="1200px" Height＜/span>="600px" style="border:1px dashed black;"
如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
[/span>script type="text/javascript"
<!--
/*
将全体代码(从)拷贝下来，粘贴到文本编辑器中，
另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
**/
// 画布宽度
const Width＜/span>=1200;
// 画布高度
const Height＜/span>=600;
// 画布环境
var context=0;
// 舞台对象
var stage;
// 消逝的时间
var timeElapsed=0;
// 核心勾画函数，由body_onload调用
function draw(){
// 画图前初始化
var canvas=document.getElementById('myCanvas');
canvas.Width＜/span>=WIDTH;
canvas.Height＜/span>=HEIGHT;
context=canvas.getContext('2d');
// 进行屏幕坐标系到笛卡尔坐标系的变换
// 处置完成前，原点在左上角，向右为X正向，向下为Y的正向
// 处置完毕后，原点移动到画布中央，向右为X正向，向上为Y的正向
context.translate(Width＜/span>/2,Height＜/span>/2);
context.rotate(getRad(180));
context.scale(-1,1);
// 之后再移动原点和改变横纵比例
// 进行坐标原点的平移
//context.translate(0,0);
// 进行横纵方向的比例转换
//context.scale(1,1);
// 初始化舞台
stage=new Stage();
// 开始动画
animate();
}//代码效果参考：http://www.ezhiqi.com/bx/art_5119.html;
//---
// 画图
//---
function animate(){
timeElapsed+=1;// 时间每轮增加1
stage.update(timeElapsed);
stage.paintBg(context);
stage.paint(context);
if(timeElapsed[/span>100){
window.requestAnimationFrame(animate);
}
}//代码效果参考：http://www.ezhiqi.com/zx/art_602.html
//---
// 舞台对象定义处
//---
function Stage(){
var obj=new Object;
obj.prpty={"x":-50,"y":0,"pts":【】};
// 随时间更新位置
obj.update=function(t){
obj.prpty.x+=1;
obj.prpty.y=Math.pow(obj.prpty.x,3);
let arr={"x":obj.prpty.x,"y":obj.prpty.y};
this.prpty.pts.push(arr);
};
// 画前景
obj.paint=function(ctx){
// 写当前点坐标
drawText2(ctx," 红色 X:"+this.prpty.x.toFixed(3)+" Y:"+this.prpty.y.toFixed(3),300,85,"navy");
// 红色曲线y=1.1^x
paintCurve(ctx,"red",this.prpty.pts);
};
// 画背景
obj.paintBg=function(ctx){
// 清屏
ctx.clearRect(-600,-300,1200,600);
// 画X轴
drawAxisX(ctx,-600,600,50);
// 画Y轴
drawAxisY(ctx,-300,300,50);
// 画网格线
drawGrid(ctx,-600,-300,50,1200,600,50,"grey");
// 作者，日期
drawText2(ctx,<span style="background-color: rgba(245, 245, 245, 1); color: rgba(
