canvas的基本用法
<canvas>
作用：在页面中设定一个区域，然后通过JavaScript动态在这个区域中绘制图片
基本用法：
1、要使用canvas元素标签，一定要设置width和height
2、也可以通过CSS对他的样式进行修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas基本用法</title>
<style type="text/css">
#drawing{
background-color: red;
}
</style>
</head>
<body>
<canvas id="drawing" width="450" height="450">A drawing og something</canvas>
</body>
</html>
3、getContext()方法一定要在canvas的后面出现，不能在canvas前面出现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas基本用法</title>
<style type="text/css">
#drawing{
background-color: red;
}
</style>
</head>
<body>
<canvas id="drawing" width="450" height="450">A drawing og something</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing")
if(drawing.getContext){
var context = drawing.getContext("2d")
console.log(context)
}
</script>
</body>
</html>
4、toDataURL()方法，
其中他的参数：图片格式，例如：image/png（默认是这个格式）
返回值为：图片的信息(在画布上面画的图片）：包括：data:图片格式；base64，图片信息
语法为：HTMLCanvasElement.toDataURL()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas基本用法</title>
<style type="text/css">
#drawing{
background-image: url(img/20181029230459.jpg);
/*background-color: red;*/
}
</style>
</head>
<body>
<img id="forget" />
<canvas id="drawing" width="550" height="550">A drawing og something</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing")
if(drawing.getContext){
var imgURL = drawing.toDataURL("image/jpeg")
console.log(imgURL)
var imgb = document.createElement("img")
var image = document.getElementById("forget")
image.src = imgURL
}
</script>
</body>
</html>
之前出现了一个bug:
Uncaught TypeError: Cannot set property ' ' of null
这是因为之前给的id不存在，或者可以说是不给id
之前的错误代码：var image = document.getElementById("img")
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）