目錄
回复讨论(解决方案)
首頁 web前端 html教學 html5 canvas 里面绘制标题 和阴影_html/css_WEB-ITnose

html5 canvas 里面绘制标题 和阴影_html/css_WEB-ITnose

Jun 24, 2016 pm 12:16 PM

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…… 我试试啊&middot; </script>
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含義是什麼?如何減輕它們?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? 我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? 我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?

See all articles