绘制文字
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//字符str//位置100,100 ctx.fillText(str,100,100);
ctx.strokeText(str,100,200); script>body>html>
水平对齐方式：left center right
文字居中，textAlign="center"
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//文字水平居中 ctx.textAlign="center";//字符str 位置100,100 ctx.fillText(str,100,100);
ctx.strokeText(str,100,200); script>body>html>
需要注意的是，设置的并不是到画布的水平居中，而是以接下来你自己设置的fillText或者strokeText中的坐标作为文字的中心
如果想要设置到画布的居中，就需要对应的坐标点设为画布中心点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//文字水平居中 ctx.textAlign="center";//字符str 在画布位置水平居中 ctx.fillText(str,300,200); script>body>html>
垂直对齐方式 top middle bottom
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//文字水平居中，以300位为水平中心 ctx.textAlign="center";//文字垂直居中 ，以0为垂直中心 ctx.textBaseline="middle";//字符str ctx.fillText(str,300,0); script>body>html>
如果需要文字全部显示，就设置垂直为top
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//文字水平居中，以300位为水平中心 ctx.textAlign="center";//文字垂直居中 ，以0为垂直顶对齐 ctx.textBaseline="top";//字符str ctx.fillText(str,300,0); script>body>html>
获取文本宽度
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境var str="hello cyy";//文字大小 ctx.font="50px sans-serif";//文字水平居中，以300位为水平中心 ctx.textAlign="center";//文字垂直居中 ，以0为垂直顶对齐 ctx.textBaseline="top";//字符str ctx.fillText(str,300,0);//获取文本宽度var width=ctx.measureText(str).width;
console.log(width); script>body>html>
遗憾的是，canvas并没有提供获取高度的接口，因此需要通过文字大小或者自己去调试来获得
图片的绘制
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/right.png";//绘制图片 ctx.drawImage(img,0,0); script>body>html>
打开以后发现并没有图片，这是因为图片的加载需要一定时间
因此绘制必须要在图片加载完成之后才能进行
使用onload函数来判定是否加载完成
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid pink;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/right.png";//图片加载完成后 img.onload=function(){//绘制图片 ctx.drawImage(img,0,0);
}
script>body>html>
给自己做一个头像，我又臭美了哈哈哈
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/cyy_small.png";//图片加载完成后 img.onload=function(){//绘制图片 ctx.drawImage(img,100,50);
}
script>body>html>
设置图像尺寸
ctx.drawImage(img,100,50,width,height);
后面新增两个参数填写图片的宽高
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/cyy_small.png";//图片加载完成后 img.onload=function(){//绘制图片//原图400,*600，缩放为200*300 ctx.drawImage(img,100,50,200,300);
}
script>body>html>
图片的裁剪，需要
ctx.drawImage(img，要裁剪的起始点坐标，要裁剪的宽高尺寸，绘制区域的起始点坐标，绘制区域的宽高尺寸);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/cyy_small.png";//图片加载完成后 img.onload=function(){//绘制图片//裁剪出原图的0,0到400,400位置//绘制到0,0到400,400位置//等于是不进行缩放的效果 ctx.drawImage(img,0,0,400,300,0,0,400,300);
}
script>body>html>
裁剪+缩放0.5倍+移动100,100的效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/cyy_small.png";//图片加载完成后 img.onload=function(){ //绘制图片
//从原图的0,0开始裁剪，宽高400,300
//从100,100开始绘制，宽高为200,150
ctx.drawImage(img,0,0,400,300,100,100,200,150);
} script>body>html>
图形画刷
首先是star.jpg长这样
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/star.jpg";//图片加载完成后 img.onload=function(){//创建图形画刷，模式为repeatvar pattern=ctx.createPattern(img,"repeat");
ctx.fillStyle=pattern;//绘制矩形，使用画刷填充 ctx.fillRect(0,0,canvas.width,canvas.height);
}
script>body>html>
模式总共有四种：no-repeat repeat-x repeat-y repeat
no-repeat的效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//加载图片var img=new Image();
img.src="img/star.jpg";//图片加载完成后 img.onload=function(){//创建图形画刷，模式为repeatvar pattern=ctx.createPattern(img,"no-repeat");
ctx.fillStyle=pattern;//绘制矩形，使用画刷填充 ctx.fillRect(0,0,canvas.width,canvas.height);
}
script>body>html>
其他两个同理
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
