Maison >interface Web >Tutoriel H5 >Explication détaillée du canevas HTML5 (4)
Explication détaillée du canevas HTML5 (4)
- 黄舟original
- 2017-03-17 15:46:182350parcourir
Utilisation d'arcTo
Utilisation : arcTo(x1, y1, x2, y2, radius)
Description : La méthode arcTo() utilisera le point de terminaison actuel, le point de terminaison 1 (x1, y1) et le point de terminaison 2 ( x2, y2), puis tracez un arc sur un cercle tangent aux deux côtés de l'angle et ayant un rayon de rayon. Le point de départ de l'arc est le point tangent entre le côté où se trouve le point final actuel et le cercle. Le point final de l'arc est le point tangent entre le côté où se trouve le point final 2 (x2, y2) et le cercle, et le point final de l'arc. l'arc dessiné est la longueur la plus courte entre les deux points tangents. De plus, si le point final actuel n’est pas le point de départ de l’arc, la méthode arcTo() ajoutera également un segment de ligne droite depuis le point final actuel jusqu’au point de départ de l’arc.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arcTo()绘制</title>
</head>
<body>
<canvas id="drawing" width="400" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置canvas的onmouse事件
//路径指定
context.beginPath();
//单独使用arcTo()方法必须指定绘图开始的基点
context.moveTo(20,20);
//创建两切线之间的弧/曲线
context.arcTo(200,150,20,280,50);
//起始端点(20,20)、端点1(290,150)、端点2(20,280)三点组成的夹角相切并且半径为50的圆弧，并且只保留两切点之间圆弧部分以及起始端点到第一个切点之间部分
context.lineTo(200,280);
//绘图
context.strokeStyle="red";
//指定路径线的粗细
context.lineWidth=3;
//绘制路径
context.stroke();
//绘制文字标注
context.fillText("当前端点(20,20)", 20,20);
context.fillText("端点1(200,150)", 200,150);
context.fillText("端点2(20,280)", 20,280);
context.fillText("直线结束点(200,280)", 200,280);
//绘制辅助线
context.lineWidth = 1;
context.strokeStyle="blue";
context.moveTo(20,20);
context.lineTo(200,150);
context.lineTo(20,280);
context.stroke();
}
</script>
</body>
</html>
Comme le montre l'image ci-dessus, le point final actuel (20,20), le point final 1 (200, 150) et le point final 2 (20, 280) forment un angle pour tracer un arc. Le rayon de l'arc est de 50 et est tangent à l'angle inclus. Si le point final actuel n’est pas le point de départ de l’arc, la méthode arcTo() ajoutera également un segment de ligne droite depuis le point final actuel jusqu’au point de départ de l’arc.
La dernière ligne droite est dessinée par context.lineTo(200,280); et n'a rien à voir avec l'arc dessiné par arcTo.
Utilisation de Stroke() et Fill()
Stroke() : tracer un chemin défini
fill() : remplir le chemin de dessin actuel
J'ai utilisé le code suivant Pour le deux toiles, les méthodes de dessin sont respectivement drawCanvas1 et drawCanvas2, pour faciliter la comparaison des différences entre les deux.
<!Doctype html>
<html>
<head>
<title>stroke()、fill()用法</title>
<meta charset="utf-8"/>
<style>
.myCanvas{
border:2px solid #f00;
}
</style>
<script>
window.onload = function(){
drawConvas1();
drawConvas2();
}; function drawConvas1(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//1、绘制三解形路径
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(100,100);
context.lineTo(20,20);
context.strokeStyle = "red";
context.stroke();
//2、绘制矩形80*80
context.beginPath();
context.moveTo(20,200);
context.lineTo(100,200);
context.lineTo(100,280);
context.lineTo(20,280);
context.lineTo(20,200);
context.stroke(); //绘制坐标点标注，以方便看其原理
context.fillText("(20,20)",20,20);
context.fillText("(20,100)",20,100);
context.fillText("(100,100)",100,100);
context.fillText("(20,200)",20,200);
context.fillText("(100,200)",100,200);
context.fillText("(100,280)",100,280);
context.fillText("(20,280)",20,280);
}
function drawConvas2(){
var canvas = document.getElementById("myCanvas2");
var context = canvas.getContext("2d");
//1、绘制三解形填充
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(100,100);
context.lineTo(20,20);
context.fillStyle = "red";
context.fill();
//2、绘制填充矩形80*80，先绘制路径再用fill()方法填充
context.beginPath();
context.moveTo(20,200);
context.lineTo(100,200);
context.lineTo(100,280);
context.lineTo(20,280);
context.lineTo(20,200);
context.fill(); //上面的代码相当于
//context.fillRect(20,200,80,80);
//3、使用方法fillRect(x,y,width,height)绘制矩形填充
context.fillRect(120,200,80,80);
}</script></head><body>
<p>
<canvas class="myCanvas" id="myCanvas1" width="400" height="400">
您的浏览器不支持canvas
</canvas>
<canvas class="myCanvas" id="myCanvas2" width="400" height="400">
您的浏览器不支持canvas
</canvas>
</p>
</body>
</html>
Utilisation de createPattern()
Syntaxe : createPattern(image, repetitionStyle)
Description : La méthode createPattern() est utilisée pour créer un objet CanvasPattern de représentation selon lequel l'image est répétée en mosaïque sur le graphique actuel. Le paramètre image spécifie l'image utilisée pour la mosaïque. Ce paramètre peut être un objet Image ou un objet Canvas. Le paramètre repetitionStyle indique comment l'image est carrelée à plusieurs reprises. Les valeurs possibles sont répéter (répéter les tuiles dans les directions horizontale et verticale, ce qui est également la valeur par défaut), répéter-x (répéter les tuiles uniquement dans le sens horizontal), répéter-. y (répéter le carrelage uniquement dans le sens vertical), pas de répétition (carreler une seule fois, pas de carrelage répété).
Regardez l'exemple suivant :
<!Doctype html>
<html>
<head>
<title>createPattern()用法</title>
<meta charset="utf-8"/>
<style>
.myCanvas{
border:2px solid #f00;
}
</style>
<script>
window.onload = function(){
drawConvas1();
drawConvas2();
};
function drawConvas1(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//1、创建一个图片对象
var img = new Image();
img.src = "html5.png";
///当图片加载完毕后再设置对应的图像平铺模式并填充矩形
img.onload = function(){
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(0,0,200,200);
}
}
function drawConvas2(){
var canvas = document.getElementById("myCanvas2");
var context = canvas.getContext("2d");
//1、创建一个图片对象
var img = new Image();
img.src = "html5.png";
///当图片加载完毕后再设置对应的图像平铺模式并填充矩形
img.onload = function(){
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(30,30,200,200);
}
}
</script>
</head>
<body>
<div>
<canvas class="myCanvas" id="myCanvas1" width="400" height="400">
您的浏览器不支持canvas
</canvas>
<canvas class="myCanvas" id="myCanvas2" width="400" height="400">
您的浏览器不支持canvas
</canvas>
</div>
</body>
</html>
Notez que la différence entre les deux réside uniquement dans les coordonnées du point de départ de la zone rectangulaire. Le premier est la coordonnée du point de départ du canevas (0,0) et le deuxième point de départ est (30,30). Du point de vue des effets, la première image de la deuxième image n’est pas complète.
Remarque : Le point de départ de référence pour que l'objet CanvasPattern commence à mosaïquer l'image n'est pas le coin supérieur gauche de l'image que nous dessinons actuellement, mais le coin supérieur gauche de l'ensemble du canevas. coordonnées du point de départ du canevas (0,0 ).
createImageData et putImageData
Syntaxe :
createImageData(width,height); Créez un objet ImageData avec respectivement la largeur et la hauteur. Renvoie un objet ImageData.
createImageData(imageData); Crée un nouvel objet ImageData identique à l'objet imageData spécifié. Renvoie un objet ImageData.
putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight
Fonction : mettre les données d'image (à partir de l'objet ImageData spécifié); ) replacé sur la toile.
imgData : est l'objet ImageData qui doit être placé sur le canevas.
x : La coordonnée x du coin supérieur gauche du canevas
y : La coordonnée y du coin supérieur gauche du canevas
Les quatre paramètres dirtyX, dirtyY, dirtyWidth, dirtyHeight sont facultatifs. n'y a pas quatre paramètres, le imageData sera modifié à partir de x , la coordonnée y est entièrement dessinée sur le canevas ; s'il y a ces quatre paramètres, les coordonnées de départ dirtyX, dirtyY, la largeur dirtyWidth et la hauteur dirtyHeight de l'image partielle de l'imageData. sont conservés.getImageData(x,y,width,height);x,y sont les coordonnées x du coin supérieur gauche où commence la copie, width et height sont la largeur et la hauteur de la zone à copier. Renvoie un objet ImageData.
<!Doctype html>
<html>
<head>
<title>putImageData()用法</title>
<meta charset="utf-8"/>
<style>
.myCanvas{
border:2px solid #f00;
}
</style>
<script>
window.onload = function(){
drawConvas1();
drawConvas2();
};
//画布1使用createImageData()、putImageData()画图
function drawConvas1(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
var imgData=context.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
context.putImageData(imgData,10,10);
}
//画布2使用getImageData()、putImageData()画图
function drawConvas2(){
//获取canvas1中的ImageData,并绘制在canvas2中
var canvas1 = document.getElementById("myCanvas1");
var context1 = canvas1.getContext("2d");
var imgData = context1.getImageData(10,10,100,100);
var canvas2 = document.getElementById("myCanvas2");
var context2 = canvas2.getContext("2d");
context2.putImageData(imgData,10,10);
}
</script>
</head>
<body>
<div>
<canvas class="myCanvas" id="myCanvas1" width="400" height="400">
您的浏览器不支持canvas
</canvas>
<canvas class="myCanvas" id="myCanvas2" width="400" height="400">
您的浏览器不支持canvas
</canvas>
</div>
</body>
</html>
toDataURL()
Syntaxe : canvas.toDataURL("image/png"); est un canevas Au lieu d'une fonction contextuelle
: exportez le canevas en tant qu'image et renvoyez les données de l'image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas绘图</title>
<script>
window.onload = function()
{
drawCanvas1();
drawCanvas2();
}
function drawCanvas1()
{
var canvas=document.getElementById("myCanvas1");
var context=canvas.getContext("2d");
//绘制红色矩形
context.fillStyle="red";
context.fillRect(10,10,200,200);
}
function drawCanvas2()
{
//取得画布1图像的数据URL
var canvas1 = document.getElementById("myCanvas1");
var imgURL = canvas1.toDataURL("image/png");
//把画布1的图像显示在画布2上
var canvas2=document.getElementById("myCanvas2");
var context2=canvas2.getContext("2d");
var image = new Image();
image.src = imgURL;
context2.drawImage(image, 10, 10);
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="400" height="400" style="border:#F00 solid 1px">
您的浏览器不支持canvas
</canvas>
<canvas id="myCanvas2" width="400" height="400" style="border:#F00 solid 1px">
您的浏览器不支持canvas
</canvas>
<br />
<h3>canvas2为使用toDataURL()方法，导出在canvas1元素上绘制的图像。</h3>
</body>
</html>
Remarquez pourquoi la position rectangulaire de la toile deux est différente de celle de la toile une ?
Parce que toDataURL() exporte le canevas entier et que le canevas deux est dessiné à partir de (10, 10).
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur