HTML+JS[JavaScript]绘制sin函数_d3 画正弦波-CSDN博客

本文链接：https://blog.csdn.net/qq_37433280/article/details/123087262

这篇博客展示了如何利用HTML和JavaScript实现一个简单的sin函数图形绘制，通过在HTML文件中插入代码并运行，即可观察到sin函数的图形效果。

摘要由CSDN通过智能技术生成

HTML+JS[JavaScript]绘制sin函数

效果
代码
使用

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>二维画布</title> 
</head>

<body onresize="myonresize()">
<div>
<script id = "杂项">

function myonresize(){
   //改变了视口长宽后的
	document.getElementById("log").innerHTML = "hello kitty!喵喵喵 myonresize"+document.body.clientWidth;
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");//ctx.canvas.height   ctx.canvas.width
	ctx.canvas.width = document.body.clientWidth
	ctx.canvas.height = document.documentElement.clientHeight *0.75
	draw()	
}
function 调试输出(){
   
	document.getElementById("log").innerHTML =  视图.ToString()+"<br>"+mouse坐标.ToString
	
}
</script>

<script id = "按钮函数">

function 放大(){
   
视图.距离顶-=1
draw()
调试输出()}
function 缩小(){
   
视图.距离顶+=1
draw()
调试输出()}
function 左移(){
   
视图.x-=1
draw()
调试输出()}
function 右移(){
   
视图.x+=1
draw()
调试输出()}
function 上移(){
   
视图.y+=1
draw()
调试输出()}
function 下移(){
   
视图.y-=1
draw()
调试输出()}
function 绘制(){
   
draw()
调试输出(