HTML5 canvas畫圖的圖文程式碼詳解-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5 canvas畫圖的圖文程式碼詳解

黄舟

Mar 25, 2017 pm 03:27 PM

HTML5 canvas畫圖

HTML5

現實生活中，畫圖需要考慮：

#畫布

筆

1.線條的粗細；

2.線條的顏色；3.線條的實；

畫線

1.起始點;

2.終點；

畫圓

1.圓點；

## 2.半徑；

3.實心、空心

畫出矩形

1.矩形的左上起點；

2.長方形的長、寬；

文字

1.字體樣式；

2.實心、空心；

#新增圖片等

二.畫圖API根據畫圖需要，canvas

有以下

API#canvas

###主要屬性與方法#### ###########

方法	#描述
save()	已儲存目前環境的狀態
restore()	傳回先前已儲存過的路徑狀態與屬性
#createEvent()
getContext()	#傳回一個對象，指出存取繪圖功能必要的 API
toDataURL()	回傳 canvas圖片的URL

canvas#的API顏色、樣式和陰影屬性和方法

屬性	描述
fillStyle	#設定或傳回用於填滿繪畫的顏色、漸層或模式
strokeStyle	#設定或傳回用於筆觸的顏色、漸層或模式
shadowColor	設定或傳回用於陰影的顏色
shadowBlur	設定或傳回用於陰影的模糊等級
#shadowOffsetX	設定或傳回陰影距離形狀的水平距離
#shadowOffsetY	設定或返回陰影距形狀的垂直距離

在指定的方向上重複指定的元素##createRadialGradient()#建立放射狀/環形的漸層（用在畫布內容上）

方法	#描述
createLinearGradient()	#建立線性漸層（用在畫布內容上）

	createPattern()

#########addColorStop()############################################################# #####規定漸層物件中的顏色和停止位置################

Canvas的API-線條樣式屬性與方法

Canvas的API-矩形方法

##屬性	描述
lineCap	設定或傳回線條的結束端點樣式
lineJoin	設定或傳回兩條線相交時，所建立的轉角類型
#lineWidth	設定或傳回目前的線條寬度
miterLimit	設定或傳回最大斜接長度

#方法	描述
rect()	建立矩形
fillRect()	繪製"被填滿"的矩形
strokeRect()	#繪製矩形（無填充）
clearRect()	在給定的矩形內清除指定的像素

Canvas的API-路徑方法

方法	描述
fill()	#填入目前繪圖（路徑）
##stroke()	繪製已定義的路徑
#beginPath()	起始一條路徑，或重設目前路徑
#moveTo()	把路徑移到畫布中的指定點，不建立線條
#closePath()	從目前點回到起始點的路徑
lineTo()	新增一個新點，建立從該點到最後指定點的線條
clip()	從原始畫布剪下任意形狀和尺寸的區域
quadraticCurveTo()	#建立二次貝塞爾曲線
bezierCurveTo()	建立三次方貝塞爾曲線
arc()	建立弧/曲線（用於建立圓形或部分圓）
arcTo()	建立兩切線之間的弧/曲線
isPointInPath()	#如果指定的點位於目前路徑中，則傳回布林值

Canvas的API-轉換方法

Canvas的API-文字屬性與方法

方法	描述
#scale ()	縮放目前繪圖至更大或更小
rotate()	旋轉目前繪圖
translate()	重新對應畫布上的(0, 0) 位置
#transform()	取代繪圖的目前轉換矩陣
##setTransform()	將目前轉換重設為單位矩陣。然後執行 transform()

#屬性	描述
font	#設定或傳回文字內容的目前字體屬性
#textAlign	設定或傳回文字內容的目前對齊方式
textBaseline	設定或傳回在繪製文字時使用的目前文字基線

#方法	#說明
fillText()	在畫布上繪製"被填滿的"文字
strokeText()	在畫布上繪製文字（無填充）
measureText()	傳回包含指定文字寬度的物件

#Canvas的API-影像繪製方法

方法
##drawImage()	#向畫布上繪製圖像、畫布或影片 chrome不支援

Canvas的API-像素操作方法與屬性

屬性	描述
width	傳回ImageData 物件的寬度
#height	傳回ImageData 物件的高度
data	會傳回一個對象，其包含指定的ImageData 物件的圖像資料

方法	描述
createImageData()	#建立新的、空白的ImageData 物件
getImageData()	傳回ImageData 對象，該物件為畫布上指定的矩形複製像素資料
putImageData()	把影像資料（從指定的ImageData 物件）放回畫布上

#Canvas的API-映像合成屬性

##設定或傳回新影像如何繪製到已有的圖像上#

三.canvas簡單畫圖

3.1canvas API#練習

<!doctype html><html>
    <head></head>
    <body>
        <canvas width="500" height="800" style="background:yellow"  id="canvas">
            您的浏览器当前版本不支持canvas标签        
            </canvas>
        <script>
            //获取画布DOM  还不可以操作
            var canvas=document.getElementById(&#39;canvas&#39;);            
            //alert(canvas);
            //设置绘图环境
            var cxt=canvas.getContext(&#39;2d&#39;);            
            //alert(cxt);
            
            //画一条线段。
                //开启新路径                
                cxt.beginPath();                
                //设定画笔的宽度                
                cxt.lineWidth=10;                
                //设置画笔的颜色                
                cxt.strokeStyle="#ff9900";                
                //设定笔触的位置                
                cxt.moveTo(20,20);                
                //设置移动的方式                
                cxt.lineTo(100,20);                
                //画线                
                cxt.stroke();                
                //封闭路径                
                cxt.closePath();            
                //画一个空心圆形  
                凡是路径图形必须先开始路径，画完图之后必须结束路径
                //开始新路径                
                cxt.beginPath();                
                //重新设置画笔                
                cxt.lineWidth=3;
                cxt.strokeStyle="green";
                cxt.arc(200,200,50,0,360,false);
                cxt.stroke();                
                //封闭新路径                
                cxt.closePath();            
                //画一个实心圆形                
                cxt.beginPath();                
                //设置填充的颜色                
                cxt.fillStyle="rgb(255,0,0)";
                cxt.arc(200,100,50,0,360,false);
                cxt.fill();
                cxt.stroke();
                cxt.closePath();            
                //画一个矩形                
                cxt.beginPath();
                cxt.rect(300,20,100,100);
                cxt.stroke();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.strokeRect(300,150,100,100)                
                //实心矩形                
                cxt.beginPath();
                cxt.rect(300,270,100,100);
                cxt.fill();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.fillRect(300,390,100,100);            
                //设置文字                
                cxt.font="40px 宋体";//css font属性                
                cxt.fillText("jingwhale",20,300);                
                //将笔触设置为1像素                
                cxt.lineWidth=1;
                cxt.strokeText("jingwhale",20,350);            
                //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,20,370,230,306);            
                //画一个三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,500);
                cxt.lineTo(300,600);
                cxt.lineTo(400,550);
                cxt.closePath();//填充或者画路径需要先闭合路径再画                
                cxt.stroke();                
                //实心三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,600);
                cxt.lineTo(300,700);
                
                cxt.lineTo(400,650);
                cxt.closePath();
                cxt.fill();            
                //旋转图片 图片
                //设置旋转环境                
                cxt.save();                    
                //在异次元空间重置0,0点的位置                    
                cxt.translate(20,20);                
                //图片/形状旋转
                    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180                    
                    cxt.rotate(-30*Math.PI/180);
                    //旋转一个线段                    
                    cxt.lineWidth=10;
                    cxt.beginPath();
                    cxt.moveTo(0,0);
                    cxt.lineTo(20,100);
                    cxt.stroke();
                    cxt.closePath();                
                    //将旋转之后的元素放回原画布                
                    cxt.restore();                
                    //过程不可颠倒 先设置00点在旋转角度，然后画图
                
            //旋转图片                
            cxt.save();
                cxt.translate(20,370);
                cxt.rotate(-10*Math.PI/180);
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,0,0,230,306);
                cxt.restore();            
                
        </script>
        
    </body></html>

3.2畫圖流程

1.設定、取得畫布DOM;

2.設定繪圖環境
var cxt=canvas.getContext('2d');
3.開啟新路徑

cxt.beginPath();

4.設定畫筆的寬度
cxt.lineWidth=10;
5.設定畫筆的顏色
cxt.strokeStyle= "#ff9900";

6.依據API畫圖

7.封閉路徑
cxt.closePath();

3.3canvas 作業-星球運作

//获取canvas绘图环境
            var context = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);
            var time = 0;
            //星球轨道
            function drawTrack(){
                for(var i = 0; i < 8; i++){
                    //开始路径
                    context.beginPath();
                    context.arc(500,500,(i+1)*50,0,360,false);
                    //关闭路径
                    context.closePath();
                    context.strokeStyle = &#39;#fff&#39;;
                    context.stroke();
                }
            }
            //执行以下此函数，画出各星球的轨道
            drawTrack();

            //星球  星球对象的构造方法 实例化后能画出所有的星球
            function Star(x,y,radius,sColor,eColor,cycle){
            //星球需要的哪些属性
                //星球的坐标点
                this.x = x;
                this.y = y;
                //星球的半径
                this.radius = radius;
                //星球的颜色
                this.sColor = sColor;
                this.eColor = eColor;
                //公转周期
                this.cycle = cycle;

                //绘画出星球
                this.draw = function(){  //异次元空间进行绘画
                    context.save();
                    //重设0,0坐标点
                    context.translate(500,500);
                    //设置旋转角度
                    context.rotate(time*360/this.cycle*Math.PI/180);

                    context.beginPath();
                    context.arc(this.x,this.y,this.radius,0,360,false);
                    context.closePath();
                    //星球的填充色(径向渐变 开始色和结束色)
                    this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
                    this.color.addColorStop(0,this.sColor);
                    this.color.addColorStop(1,this.eColor);
                    context.fillStyle = this.color;
                    context.fill();
                    context.restore();

                    time +=1;
                }
                
            }

            //各星球构造方法 从star中继承
            function Sun(){
                Star.call(this,0,0,20,&#39;#f00&#39;,&#39;#f90&#39;,0);
            }
            function Mercury(){
                Star.call(this,0,-50,10,&#39;#A69697&#39;,&#39;#5C3E40&#39;,87.70);
            }
            function Venus(){
                Star.call(this,0,-100,10,&#39;#C4BBAC&#39;,&#39;#1F1315&#39;,224.701);
            }
            function Earth(){
                Star.call(this,0,-150,10,&#39;#78B1E8&#39;,&#39;#050C12&#39;,365.2422);
            }
            function Mars(){
                Star.call(this,0,-200,10,&#39;#CEC9B6&#39;,&#39;#76422D&#39;,686.98);
            }
            function Jupiter(){
                Star.call(this,0,-250,10,&#39;#C0A48E&#39;,&#39;#322222&#39;,4332.589);
            }
            function Saturn(){
                Star.call(this,0,-300,10,&#39;#F7F9E3&#39;,&#39;#5C4533&#39;,10759.5);
            }
            function Uranus(){
                Star.call(this,0,-350,10,&#39;#A7E1E5&#39;,&#39;#19243A&#39;,30799.095);
            }
            function Neptune(){
                Star.call(this,0,-400,10,&#39;#0661B2&#39;,&#39;#1E3B73&#39;,164.8*365);
            }

            //各星球对象的实例化
            var sun = new Sun();
            var water = new Mercury();
            var gold = new Venus();
            var diqiu = new Earth();
            var fire = new Mars();
            var wood = new Jupiter();
            var soil = new Saturn();
            var sky = new Uranus();
            var sea = new Neptune();

            function move(){
                //清除画布
                context.clearRect(0,0,1000,1000);
                //重新绘制一遍轨道
                drawTrack();

                sun.draw();
                water.draw();
                gold.draw();
                diqiu.draw();
                fire.draw();
                wood.draw();
                soil.draw();
                sky.draw();
                sea.draw();
            }
            
            //星球围绕太阳运动起来
            setInterval(move,100);

示範

四.canvas畫圖實例-網頁畫圖

HTML5 canvas畫圖的圖文程式碼詳解

1.畫圖板功能分析

功能區(儲存、清空)
工具區(形狀與工具)
屬性設定區(顏色與線寬)
繪圖區域(canvas標籤)

2.技術需求分析

頁面佈局-> ;HTML5標籤
頁面美化->CSS2
功能設定->Javascript程式設計
Canvas API->屬性設定、畫線、寫字、畫圖、畫布操作(清空、取得畫布資訊)、
下載->php的下載(JS無法操作本機檔案)

#3.畫一個簡單的畫布

滑鼠點擊時
準備起始點moveTo()、設定標誌位
滑鼠移動時
判斷標誌位，值為true畫圖，false不畫圖
移動時指定路徑lineTo()，並且畫出stroke ()
滑鼠離開或抬
清空標誌位元

4.複雜的線上畫板

取得對應元素物件
設定點選狀態
設定觸發功能
顏色屬性設定
線寬屬性設定
繪圖形狀設定
工具指定

#5.html結構部分：

HTML5 canvas畫圖的圖文程式碼詳解

#6.畫圖技術點：

#整幅畫圖被滑鼠事件所控制

滑鼠按下的事件-》mousedown
滑鼠移動的事件-》mousemove
滑鼠抬起事件-》 mouseup

//鼠标按下的时候-》设置开始点canvas.onmousedown=function(evt){

//鼠标移动的时候-》不同的绘图（获取鼠标的位置）canvas.onmousemove=function(evt){}

//鼠标抬起的时候结束绘图canvas.onmouseup=function(){

#屬性	描述
#globalAlpha	##設定或傳回繪圖的目前alpha 或透明值
globalCompositeOperation

以上是HTML5 canvas畫圖的圖文程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。