HTML+JS[JavaScript]绘制sin函数

Air-air

已于 2022-02-23 12:41:24 修改

阅读量1k

点赞数

文章标签： javascript html 前端

于 2022-02-23 12:34:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37433280/article/details/123087262

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

代码

<!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()
调试输出(

最低0.47元/天解锁文章