目录
html5 canvas 里面绘制标题 和阴影_html/css_WEB-ITnose
nbsp;html>
<script> <br /> <br /> function createCanopyPath(context) <br /> { <br /> context.beginPath(); <br /> <br /> context.moveTo(-25,-50); <br /> context.lineTo(-10,-80); <br /> context.lineTo(-20,-80); <br /> context.lineTo(-5,-110); <br /> context.lineTo(-15,-110); <br /> <br /> context.lineTo(0,-140); <br /> <br /> context.lineTo(15,-110); <br /> context.lineTo(5,-110); <br /> context.lineTo(20,-80); <br /> context.lineTo(10,-80); <br /> context.lineTo(25,-50); <br /> <br /> context.closePath(); <br /> } <br /> <br /> function drawTrails() <br /> { <br /> var canvas=document.getElementById('diagonal'); <br /> var context=canvas.getContext('2d'); <br /> <br /> context.save(); <br /> context.translate(130,250); <br /> //绘制树冠函数 <br /> createCanopyPath(context); <br /> //填充树冠颜色 <br /> context.lineWidth=4; <br /> context.lineJoin='round'; <br /> context.strokeStyle='#663300'; <br /> context.fillStyle='#339900'; <br /> context.fill(); <br /> <br /> //渐变 <br /> var trunkGradient=context.createLinearGradient(-5,-50,5,-50); <br /> trunkGradient.addColorStop(0,'#663300'); <br /> trunkGradient.addColorStop(0.4,'#996600'); <br /> trunkGradient.addColorStop(1,'#552200'); <br /> //树干 <br /> //context.fillStyle='#663300'; <br /> context.fillStyle=trunkGradient; <br /> context.fillRect(-5,-50,10,50); <br /> var canopyShadow=context.createLinearGradient(0,-50,0,0); <br /> canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); <br /> canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); <br /> context.fillStyle=canopyShadow; <br /> context.fillRect(-5,-50,10,50); <br /> <br /> context.stroke(); <br /> context.restore(); <br /> //路，两条曲线 <br /> context.save(); <br /> context.translate(-10,350); <br /> context.beginPath(); <br /> context.moveTo(0,0); <br /> context.quadraticCurveTo(170,-50,260,-190); <br /> context.quadraticCurveTo(310,-250,410,-250); <br /> context.strokeStyle='#663300'; <br /> context.lineWidth=20; <br /> context.stroke(); <br /> context.restore(); <br /> //阴影！！！！ <br /> //context.save(); <br /> //context.transform(1,0,-0.5,1,0,0); <br /> //context.scale(1,0.6); <br /> //context.fillStyle='rgba(0,0,0,0.2)'; <br /> //context.fillRect(-5,-10,10,50); <br /> //createCanopyPath(context); <br /> //context.fill(); <br /> //context.rotate(1.57); <br /> //context.drawImage(myImage,0,0,100,100); <br /> //context.stroke(); <br /> //content.restore(); <br /> //标题 <br /> content.save(); <br /> <br /> context.font="60px impact"; <br /> context.fillStyle='#996600'; <br /> context.textAlign='center'; <br /> context.fillText('Happy Trails!',200,60,400); <br /> <br /> context.stroke(); <br /> content.restore(); <br /> } <br /> window.addEventListener("load",drawTrails,true); <br /> </script>
阴影也不出来 不知道是不是rotate没起作用？还有标题 不出字啊
回复讨论(解决方案)
大神们啊···
nbsp;html>
<script> <br /> <br /> function createCanopyPath(context) <br /> { <br /> context.beginPath(); <br /> <br /> context.moveTo(-25,-50); <br /> context.lineTo(-10,-80); <br /> context.lineTo(-20,-80); <br /> context.lineTo(-5,-110); <br /> context.lineTo(-15,-110); <br /> <br /> context.lineTo(0,-140); <br /> <br /> context.lineTo(15,-110); <br /> context.lineTo(5,-110); <br /> context.lineTo(20,-80); <br /> context.lineTo(10,-80); <br /> context.lineTo(25,-50); <br /> <br /> context.closePath(); <br /> } <br /> <br /> function drawTrails() <br /> { <br /> var canvas=document.getElementById('diagonal'); <br /> var context=canvas.getContext('2d'); <br /> <br /> context.save(); <br /> context.translate(130,250); <br /> //绘制树冠函数 <br /> createCanopyPath(context); <br /> //填充树冠颜色 <br /> context.lineWidth=4; <br /> context.lineJoin='round'; <br /> context.strokeStyle='#663300'; <br /> context.fillStyle='#339900'; <br /> context.fill(); <br /> <br /> //渐变 <br /> var trunkGradient=context.createLinearGradient(-5,-50,5,-50); <br /> trunkGradient.addColorStop(0,'#663300'); <br /> trunkGradient.addColorStop(0.4,'#996600'); <br /> trunkGradient.addColorStop(1,'#552200'); <br /> //树干 <br /> //context.fillStyle='#663300'; <br /> context.fillStyle=trunkGradient; <br /> context.fillRect(-5,-50,10,50); <br /> var canopyShadow=context.createLinearGradient(0,-50,0,0); <br /> canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); <br /> canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); <br /> context.fillStyle=canopyShadow; <br /> context.fillRect(-5,-50,10,50); <br /> <br /> context.stroke(); <br /> context.restore(); <br /> //路，两条曲线 <br /> context.save(); <br /> context.translate(-10,350); <br /> context.beginPath(); <br /> context.moveTo(0,0); <br /> context.quadraticCurveTo(170,-50,260,-190); <br /> context.quadraticCurveTo(310,-250,410,-250); <br /> context.strokeStyle='#663300'; <br /> context.lineWidth=20; <br /> context.stroke(); <br /> context.restore(); <br /> <br /> <br /> // context.save(); <br /> // context.rotate(1.57); <br /> // context.drawImage(myImage,0,0,100,100); <br /> // context.restore(); <br /> // //阴影！！！！ <br /> // context.save(); <br /> // context.transform(1,0,-0.5,1,0,0); <br /> // context.scale(1,0.6); <br /> // context.fillStyle='rgba(0,0,0,0.2)'; <br /> // context.fillRect(-5,-50,10,50); <br /> // createCanopyPath(context); <br /> // context.fill(); <br /> <br /> //标题 <br /> context.save(); <br /> context.shadowColor='rgba(0,0,0,0.2)'; <br /> context.shadowOffsetX=15; <br /> context.shadowOffsetY=-10; <br /> context.shadowBlur=2; <br /> context.font="60px impact"; <br /> context.fillStyle='#996600'; <br /> context.textAlign='center'; <br /> context.fillText('Happy Trails!',200,60,400); <br /> context.restore(); <br /> } <br /> window.addEventListener("load",drawTrails,true); <br /> </script>
文字和阴影显示出来了
nbsp;html>
<script> <br /> <br /> function createCanopyPath(context) <br /> { <br /> context.beginPath(); <br /> <br /> context.moveTo(-25,-50); <br /> conte…… 我试试啊· </script>
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
<🎜>：种植花园 - 完整的突变指南
4 周前
By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系统，解释
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML与CSS和JavaScript：比较Web技术
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
超越HTML：网络开发的基本技术
Apr 26, 2025 am 12:04 AM
要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。
＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？
Apr 28, 2025 pm 05:42 PM
本文讨论了HTML标签，和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。
HTML作为标记语言：其功能和目的
Apr 22, 2025 am 12:02 AM
HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。
