微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

HTML5画布问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:12:06
原创
1208人浏览过

新建了两个画布，每个画布都有一张图片，如何把一张画布放在另外一张画布的上面，看起来的效果是一张图片浮在另外一张图片上面。

AI建筑知识问答
AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

AI建筑知识问答 22
查看详情 AI建筑知识问答

回复讨论(解决方案)

设置坐标应该可以吧
参考
http://www.w3school.com.cn/html5/html_5_canvas.asp
http://www.cnblogs.com/myssh/archive/2011/11/24/2261901.html

这个解决不了

你是不是想把上面的canvas背景设置成透明？你试一下是否满足你的需求。







<script> <br /> var context1 = document.getElementById("c1").getContext("2d"); <br /> var context2 = document.getElementById("c2").getContext("2d"); <br /> var img1 = new Image(); <br /> img1.src="1.PNG"; <br /> var img2 = new Image(); <br /> img2.src="2.PNG"; <br /> img1.onload=function(){ <br /> context1.drawImage(img1,0,0); <br /> } <br /> img2.onload=function(){ <br /> context2.drawImage(img2,0,0); <br /> } <br /> context2.globalAlpha=0.5; <br /> <br /> </script>

用一个画布就行了，干嘛非要2个？

用float加margin不行吗？

用一个画布就行了，干嘛非要2个？
一张画布放两张图片，大的那张会把小的那张覆盖了，没有浮在上面的效果。就和QQ空间的相册差不多

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：CSS布局overflow hidden的说明 没搞懂。_html/css_WEB-ITnose 下一篇：怎么让下面代码弹出的图片定住？_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html按钮链接怎么打_html按钮链接如何打详细方法 答案：HTML中按钮添加链接常用四种方法：1.onclick事件跳转，兼容性好；2.button嵌套在a标签内，需设type="button"；3.form提交实现GET跳转，适合带参场景；4.样式化a标签模拟按钮，语义清晰且无需JS。
2025-11-09 19:49:11
462
如何通过Geany设置HTML验证插件的详细教程 Geany可通过插件和外部工具实现HTML验证。首先启用“ExternalTools”插件，再安装HTMLTidy或vnu.jar验证器。配置外部工具命令：Tidy使用tidy-eq-errors-quiet"$(basename%f)"，vnu.jar使用java-jar/opt/vnu/vnu.jar"%f"。保存文件后运行命令，结果在消息窗口显示，支持快捷键触发，双击错误跳转行号，实现高效语法检查。
2025-11-09 19:37:02
713
HTML5代码如何设计响应式表格 HTML5代码溢出处理的方案 响应式表格溢出可通过四种方案解决：1.用带滚动的容器限制宽度，允许横向滑动；2.用媒体查询在小屏隐藏非关键列；3.用sticky固定表头并滚动内容；4.超小屏转卡片布局，每行变卡片提升可读性。
2025-11-09 19:29:02
384
html网页临时缓存数据怎么清除_html网页临时缓存数据清除的实用技巧 清除浏览器缓存可解决页面显示异常问题，具体方法包括：一、通过Ctrl+Shift+Delete清除“缓存的图像和文件”；二、使用开发者工具禁用缓存并强制刷新；三、修改URL参数如添加?reload=1绕过缓存；四、开发者可设置Cache-Control等HTTP头控制缓存行为。
2025-11-09 19:19:02
627
内联CSS怎么应用到HTML_内联CSS应用到HTML的使用方法 使用内联CSS可直接在HTML元素的style属性中定义样式，适用于单个元素快速调整。通过在标签内添加style="property:value;"形式设置样式，各声明以分号分隔。可为多个元素分别添加内联样式，但不推荐大规模使用。结合JavaScript可通过element.style.property修改样式，实现动态交互效果。
2025-11-09 19:12:02
580
HTML视频怎么处理跨浏览器兼容性问题_HTML视频兼容性处理策略 答案：解决HTML视频跨浏览器兼容性需提供MP4和WebM双格式，通过标签优先加载，结合Modernizr检测不支持video的旧浏览器并降级处理，注意移动端自动播放限制与muted属性使用，配置服务器MIME类型为video/mp4和video/webm以确保正常加载。
2025-11-09 18:57:08
475
html缓存内容怎么一键删除_html缓存内容一键删除的完整攻略 网页加载异常或显示旧内容时，可通过清除浏览器缓存解决。首先在Chrome、Edge等浏览器中按Ctrl+Shift+Delete选择“所有时间”并勾选“缓存的图像和文件”后清除；其次使用开发者工具右键“检查”或F12，长按刷新按钮选择“清空缓存并硬性重新加载”，或直接按Ctrl+F5强制刷新；还可修改URL参数如example.com?reload=1使浏览器发起新请求；若拥有服务器权限，可设置HTTP头Cache-Control:no-cache、Pragma:no-cache、Expires
2025-11-09 18:24:02
204
html代码怎么部署_html网页代码部署到服务器方法与流程详解 要让他人通过互联网访问HTML网页，需将其部署到服务器。一、虚拟主机：购买服务后通过FTP上传文件至public_html目录。二、云服务器：购买ECS后安装Apache或Nginx，将文件传至/var/www/html并启动服务。三、GitHubPages：创建username.github.io仓库并推送代码，自动发布至对应域名。四、Vercel/Netlify：关联Git仓库，选择分支与路径，一键部署并支持自定义域名和HTTPS。
2025-11-09 17:51:08
393
html5使用iframe实现微前端架构 html5使用跨文档通信的postMessage 答案：通过iframe结合postMessage可实现轻量级微前端方案，适用于跨域、技术栈异构及强隔离场景。主应用用iframe嵌入子应用并利用postMessage通信，需校验origin防XSS，统一消息格式，处理高度自适应与路由同步问题，适合中小型项目。
2025-11-09 17:39:02
606
html图片如何插入_HTML图片（img/background）插入与路径引用方法 答案是掌握图片路径引用逻辑：HTML中用标签插入内容图片，路径相对HTML文件；CSS中用background-image设置背景图，路径相对CSS文件，二者均支持相对、绝对路径及网络URL，需注意基准点、大小写敏感和文件存在性。
2025-11-09 17:11:02
152
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部