搜尋
首頁web前端H5教程html5之canvas起步的程式碼範例詳解(圖)

1)HTMLCanvasElement物件的成員:

   height——對應於canvas元素的height屬性

#   width——對應於canvas元素的width屬性;

##   getContext()— —為畫布返回繪圖上下文;

2)繪製一個矩形:

  fillRect(x,y,w,h)-繪製一個實心矩形;

  strokeRect(x,y,w,h)-繪製一個空心矩形;

  clearRect(x,y,w,h)-清除指定的長方形;

canvas{
            border:medium double black;
            margin: 4px;
        }
        body > *{
            float: left;
        }
<canvas id="canvas1" width="500" height="200">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
<script>
        //绘制矩形
        var ctx=document.getElementById("canvas1").getContext("2d");
        //ctx.fillRect(10,10,50,50);
        var offset=10;
        var size=50;
        var count=5;
        for(var i=0;i<count;i++){
            ctx.fillRect(i*(offset+size)+offset,offset,size,size);
            ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);
            ctx.clearRect(i*(offset+size)+offset,offset+5,size,size-10);
        }
    </script>

3)設定畫布繪製
狀態

  li neWidth-取得或設定線條的寬度(預設值為1.0);

lineJoin-取得或設定線條與圖形連接時的樣式(預設值為miter);

#  fillStyle-取得或設定用於實心圖形的樣式(預設值為black);

  strokeStyle-取得或設定用於線條的樣式(預設值為black );

 <canvas id="canvas2" width="500" height="70">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //在执行操作前绘制设置状态
        var ctx=document.getElementById("canvas2").getContext("2d");
        ctx.lineWidth=2;
        ctx.strokeRect(10,10,50,50);
        ctx.lineWidth=4;
        ctx.strokeRect(70,10,50,50);
        ctx.lineWidth=6;
        ctx.strokeRect(130,10,50,50);
        ctx.lineWidth=8;
        ctx.strokeRect(200,10,50,50);
    </script>


<canvas id="canvas3" width="500"    style="max-width:90%">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //设置lineJoin属性
        var ctx=document.getElementById("canvas3").getContext("2d");
        ctx.lineWidth=20;

        ctx.lineJoin="round";
        ctx.strokeRect(20,20,100,100);
        ctx.lineJoin="bevel";
        ctx.strokeRect(160,20,100,100);
        ctx.lineJoin="miter";
        ctx.strokeRect(300,20,100,100);
    </script>


    <canvas id="canvas4" width="500"    style="max-width:90%">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //设置填充和笔触样式
        var ctx=document.getElementById("canvas4").getContext("2d");
        var offset=10;
        var size=50;
        var count=5;
        var lineWidth=3;
        var fillColors=["black","grey","lightgrey","red","blue"];
        var strokeColors=["rgb(0,0,0)","rgb(100,100,100)","rgb(200,200,200)","rgb(255,0,0)","rgb(0,0,255)"];
        for(var i=0;i<count;i++){
            ctx.fillStyle=fillColors[i];
            ctx.strokeStyle=strokeColors[i];
            ctx.fillRect(i*(offset+size)+offset,offset,size,size);
            ctx.strokeRect(i*(offset+size)+offset,(2*offset)+size,size,size);

        }
    </script>

4)使用漸層

  createLinearGradient (x0,y0,x1,y1)-建立線性漸變,回傳CanvasGradient物件;

  createRadialGradient(x0,y0,r0,x1,y1,r1 )-建立徑向漸變,傳回CanvasGradient物件;

CanvasGradient物件的方法:

  addColorStop(position>,)-將漸變的梯度線加一種純色;

#

    <canvas id="canvas5" width="500" height="140">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //使用线性渐变
        var ctx=document.getElementById("canvas5").getContext("2d");
        //var grad=ctx.createLinearGradient(0,0,500,140);
        var grad=ctx.createLinearGradient(10,10,60,60);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        ctx.fillStyle=grad;
        //ctx.fillRect(0,0,500,140);
        ctx.fillRect(10,10,50,50);
    </script>


    <canvas id="canvas6" width="500"    style="max-width:90%">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //使用径向渐变
        var ctx=document.getElementById("canvas6").getContext("2d");
        var grad=ctx.createRadialGradient(250,70,20,200,60,100);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        ctx.fillStyle=grad;
        ctx.fillRect(0,0,500,140);
    </script>


    <canvas id="canvas7" width="500"    style="max-width:90%">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <script>
        //使用较小的图形和径向渐变
        var ctx=document.getElementById("canvas7").getContext("2d");
        var grad=ctx.createRadialGradient(250,70,20,200,60,100);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        ctx.fillStyle=grad;
        ctx.fillRect(150,20,75,50);
        ctx.lineWidth=8;
        ctx.strokeStyle=grad;
        ctx.strokeRect(250,20,75,50);
    </script>


5)使用图案

   createPattern(html5之canvas起步的程式碼範例詳解(圖),int2)——创建图案,指定图案文件的来源和重复方式;

  int2的值是指定重复样式:分别有repeat、repeat-x、repeat-y、no-repeat;

    <canvas id="canvas8" width="500" height="150">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <img  src="/static/imghwm/default1.png"  data-src="images/banana-small.png"  class="lazy"  id="banana" hidden / alt="html5之canvas起步的程式碼範例詳解(圖)" >
    <script>
        //使用图像类的图案
        var ctx=document.getElementById("canvas8").getContext("2d");
        var imageElem=document.getElementById("banana");
        var pattern=ctx.createPattern(imageElem,"repeat");
        ctx.fillStyle=pattern;
        ctx.fillRect(0,0,500,148);
    </script>

6)保存和恢复状态

 save()——保存绘制状态属性的值,并把它们推入状态栈;

 restore()——取出状态栈的第一组值,用它们来设置绘制状态;

    <canvas id="canvas9" width="500" height="150" preload="auto">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <p>
        <button>Save</button>
        <button>Restore</button>
    </p>
    <script>
        //保存和恢复状态
        var ctx=document.getElementById("canvas9").getContext("2d");
        var grad=ctx.createLinearGradient(500,0,500,140);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        var colors=["black",grad,"red","green","yellow","black","grey"];
        var cIndex=0;
        ctx.fillStyle=colors[cIndex];
        draw();
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=handleButtonPress;
        }
        function handleButtonPress(e){
            switch(e.target.innerHTML){
                case &#39;Save&#39;:
                    ctx.save();
                    cIndex=(cIndex+1)%colors.length;
                    ctx.fillStyle=colors[cIndex];
                    draw();
                    break;
                case &#39;Restore&#39;:
                    cIndex=Math.max(0,cIndex-1);
                    ctx.restore();
                    draw();
                    break;
            }
        }
        function draw(){
            ctx.fillRect(0,0,500,140);
        }
    </script>


7)绘制图像

  drawImage方法——在画布上绘制图像,指定一个img、canvas或video元素作为来源;

    <canvas id="canvas10" width="500" height="150" preload="auto">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <img  src="/static/imghwm/default1.png"  data-src="images/banana-small.png"  class="lazy"  id="banana2" hidden / alt="html5之canvas起步的程式碼範例詳解(圖)" >
    <script>
        //使用drawImage方法
        var ctx2=document.getElementById("canvas10").getContext("2d");
        var imageElement=document.getElementById("banana2");
        ctx2.drawImage(imageElement,10,10);
        ctx2.drawImage(imageElement,120,10,100,120);
        ctx2.drawImage(imageElement,20,20,100,50,250,10,100,120);
    </script>


    <video id="vid" src="raw/timessquare.webm" controls preload="auto" width="360"    style="max-width:90%">
        您的浏览器不支持;
    </video>
    <canvas id="canvas11" width="360" height="240">
        您的浏览器不支持;
    </canvas>
    <p>
        <button id="pressme">Snapshot</button>
        <button id="pressme2">PressMe</button>
    </p>
    <canvas id="canvas12" width="360" height="240">
        您的浏览器不支持;
    </canvas>
    <script>
        //使用视频作为drawImage方法的来源
        var ctx3=document.getElementById("canvas11").getContext("2d");
        var imageElement3=document.getElementById("vid");
        document.getElementById("pressme").onclick=function(e){
            ctx3.drawImage(imageElement3,0,0,360,240);
        }
        var width=100;
        var height=10;
        ctx3.lineWidth=5;
        ctx3.strokeStyle="red";
        setInterval(function(){
            ctx3.drawImage(imageElement3,0,0,360,240);
            ctx3.strokeRect(180-(width/2),120-(height/2),width,height);
        },25);
        setInterval(function(){
            width=(width-1)%200;
            height=(height+3)%200;
        },100);
    </script>
    <script>
        //将画布作为drawImage方法的来源
        var srcCanvasElement=document.getElementById("canvas11");
        var ctx4=srcCanvasElement.getContext("2d");
        var ctx5=document.getElementById("canvas12").getContext("2d");
        var imageElement4=document.getElementById("vid");
        document.getElementById("pressme2").onclick=takeSnapshot;
        var width=100;
        var height=10;
        ctx4.lineWidth=5;
        ctx4.strokeStyle="red";
        ctx5.lineWidth=30;
        ctx5.strokeStyle="black";
        setInterval(function(){
            ctx4.drawImage(imageElement4,0,0,360,240);
            ctx4.strokeRect(180-(width/2),120-(height/2),width,height);
        },25);
        setInterval(function(){
            width=(width+1)%200;
            height=(height+3)%200;
        },100);
        function takeSnapshot(){
            ctx5.drawImage(srcCanvasElement,0,0,360,240);
            ctx5.strokeRect(0,0,360,240);
        }
    </script>



以上是html5之canvas起步的程式碼範例詳解(圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
解構H5代碼:標籤,元素和屬性解構H5代碼:標籤,元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成:1.標籤定義內容類型,用尖括號包圍,如。 2.元素由開始標籤、內容和結束標籤組成,如內容。 3.屬性在開始標籤中定義鍵值對,增強功能,如。這些是構建網頁結構的基本單位。

了解H5代碼:HTML5的基本原理了解H5代碼:HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術,提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等,增強了網頁結構和SEO。 2.支持多媒體元素和,無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性,簡化了驗證過程。 4.提供了離線和本地存儲功能,提升了網頁性能和用戶體驗。

H5代碼:Web開發人員的最佳實踐H5代碼:Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5:網絡標準和技術的發展H5:網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能,使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎?探索細節H5是HTML5的速記嗎?探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱,它代表了一個更廣泛的現代網頁開發技術生態:1.H5包括HTML5、CSS3、JavaScript及相關API和技術;2.它提供更豐富、互動、流暢的用戶體驗,能在多設備上無縫運行;3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5:網絡開發中常用的術語H5和HTML5:網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

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