Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung

Detaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung

黄舟
黄舟Original
2017-03-25 15:27:374334Durchsuche

HTML5Leinwandzeichnung

HTML5 -Tag für Zeichnen von Bildern (per Skript, normalerweise JavaScript). Das -Element selbst verfügt jedoch über keine Zeichenfunktionen (es ist nur ein Container für Grafiken) – Sie müssen Skripte verwenden, um die eigentliche Arbeit zu erledigen Aufgaben.
Die getContext()-Methode gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt.
Dieses Handbuch stellt die vollständigen getContext("2d")-Objekteigenschaften und -Methoden zum Zeichnen von Text und Linien bereit. Rechtecke, Kreise usw. auf der Leinwand

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen und seine Eigenschaften und Methoden. Zeichnen

Im wirklichen Leben muss das Zeichnen berücksichtigt werden:

Leinwand

Stift

1 . Die Dicke der Linie;

Die Virtualität und Festigkeit der Linie; 🎜>

Startpunkt

Zeichnen Sie einen Kreis

🎜>2. Radius

3. Massiv, hohl

Der obere linke Startpunkt des Rechteck;

Die Länge und Breite des Rechtecks ​​

1. Massiv oder hohl;

Bilder hinzufügen usw.

2. Zeichnen

API

Je nach Zeichenbedarf,

Leinwand

hat die folgende

API

Leinwand

Haupteigenschaften und Methoden

方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()  
getContext() 返回一个对象,指出访问绘图功能必要的API
toDataURL() 返回canvas图像的URL


Leinwand
API颜色、样式和阴影属性和方法

StrokeStyle
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
属性
描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变(用在画布内容上)
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
addColorStop() 规定渐变对象中的颜色和停止位置


Canvas的API-线条样式属性和方法

lineJoinlineWidthmiterLimit
属性
属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时,所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
描述
lineCap 设置或返回线条的结束端点样式
设置或返回两条线相交时,所创建的拐角类型
设置或返回当前的线条宽度
设置或返回最大斜接长度


Canvas的API-矩形方法

StrokeRect()clearRect()
方法
方法 描述
rect() 创建矩形
fillRect() 绘制"被填充"的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
描述
rect() 创建矩形
fillRect() 绘制"被填充"的矩形
绘制矩形(无填充)
在给定的矩形内清除指定的像素


Canvas API-Pfadmethode

方法 描述
fill() Aktuelle Zeichnung (Pfad) füllen
Stroke() Zeichne einen definierten Pfad
beginPath() Starten Sie einen Pfad oder setzen Sie den aktuellen Pfad zurück
moveTo() Verschieben der Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu erstellen
closePath() Aus dem Strom erstellen Punkt Pfad zurück zum Ausgangspunkt
lineTo() Neuen Punkt hinzufügen, von diesem Punkt bis zum erstellen Endlinie am angegebenen Punkt
clip() Schneidet einen Bereich beliebiger Form und Größe aus dem Original-Leinwand
quadraticCurveTo() Erstellen Sie eine quadratische Bezier-Kurve
bezierCurveTo() Erstellen Sie eine kubische Bezier-Kurve
arc() Bögen/Kurven erstellen (zum Erstellen von Kreisen oder Teilkreisen)
arcTo() Erstellen Sie einen Bogen/eine Kurve zwischen zwei Tangenten
isPointInPath() 如果指定的点位于当前路径中,返回布尔值


Canvas的API-转换方法

方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
方法描述scale()缩放当前绘图至更大或更小rotate() 旋转当前绘图translate() 重新映射画布上的 (0,0) 位置transform() 替换绘图的当前转换矩阵setTransform()将当前转换重置为单位矩阵.然后运行 transform()


Canvas的API-文本属性和方法

textAligntextBaseline
属性
属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
描述
font 设置或返回文本内容的当前字体属性
设置或返回文本内容的当前对齐方式
设置或返回在绘制文本时使用的当前文本基线

 

方法 描述
fillText() 在画布上绘制"被填充的"文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象


Canvas的API-图像绘制方法

方法
方法 描述
drawImage() 向画布上绘制图像、画布或视频  chrome不支持
描述
drawImage() 向画布上绘制图像、画布或视频  chrome不支持


Canvas的API-像素操作方法和属性

heightdata
属性
属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象,其包含指定的 ImageData 对象的图像数据
描述
width 返回 ImageData 对象的宽度
返回 ImageData 对象的高度
返回一个对象,其包含指定的 ImageData 对象的图像数据

 

方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上


Canvas的API-图像合成属性

globalCompositeOperation
属性
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
设置或返回新图像如何绘制到已有的图像上


3. Einfache Leinwandzeichnung

3.1Leinwand-APIÜbung

<!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 Zeichenprozess

1. Legen Sie das Canvas-DOM fest und holen Sie es ab.

2. Stellen Sie die Zeichenumgebung ein.
. Neuer Pfad

cxt.beginPath();

4. Legen Sie die Breite des Pinsels fest

cxt.lineWidth=10;
5
cxt. StrokeStyle="#ff9900";

6. Pfad schließen


3.3 Canvas-Hausaufgabe – Planetenbewegung

Demonstration

//获取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);

4. Canvas-Zeichnungsbeispiel – Webseitenzeichnung

Detaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung1. Zeichenbrett-Funktionsanalyse

Menübandbereich (speichern, löschen)Werkzeugbereich (Formen und Werkzeuge). )

Eigenschaftseinstellungsbereich (Farbe und Linienbreite)
Zeichenbereich (Canvas-Tag)




2. Technische Anforderungsanalyse

Seitenlayout

->HTML5-Tag
Seitenverschönerung->CSS2

Funktionseinstellung->Javascript-ProgrammierungCanvas API->Attributeinstellung, Strichzeichnung, Schreiben, Zeichnen , Canvas-Vorgang (Löschen, Canvas-Informationen abrufen), Download->php-Download (JS kann keine lokalen Dateien bedienen)



3. Zeichnen Sie eine einfache Canvas

Wenn die Maus klicktBereiten Sie den Startpunkt moveTo() vor und setzen Sie das Flag-Bit.

Wenn sich die Maus bewegt
Beurteilen Sie das Flag-Bit. Der Wert ist wahr, um das Bild zu zeichnen, und falsch Das Bild nicht zeichnen

Geben Sie beim Verschieben die Pfadlinie an () Und zeichnen Sie den Strich()
Maus weg oder heben
Löschen Sie die Flagge



4 das komplexe Online-Zeichenbrett

Entsprechendes ElementobjektKlickstatus festlegen

Triggerfunktion festlegen
Farbattributeinstellung

Linienbreitenattributeinstellung
Zeichnungsform Einstellung
Werkzeugspezifikation



5.html Strukturteil:

Detaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung

6. Technische Punkte zum Zeichnen: Detaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung

Die gesamte Zeichnung wird durch das Maus--Ereignis

Maus-nach-unten-Ereignis gesteuert. 》mousedown

Mouse move event-》mousemove
Mouse up Event-》mouseup




Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Grafikcodes für die HTML5-Leinwandzeichnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn