您的位置：首页 > Web前端 > HTML5

HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)

2017-05-28 12:16 886 查看

使用图像

在canvas中插入图像

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function Draw(){
//使用三种方式插入图像
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var newImg=new Image(); //使用Image()构造函数创建图像对象
newImg.src="../img/3.jpg";
newImg.onload=function(){
//从左上角开始绘制图像
context.drawImage(newImg,0,0);
//从指定坐标开始绘制图像，并设置图像宽和高 指定这些参数可以使得图像可以缩放
context.drawImage(newImg,250,100,150,200);
//裁剪一部分图像放在左上角，并稍微放大
context.drawImage(newImg,90,80,100,100,0,0,120,120);
}
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
</body>
</html>


三种方法插入图片的效果



裁剪区域

      在路径绘图中，我们使用了两大绘图方法，即用于绘制线条的 stroke()方法和用于填充区域的fill()方法。关于路径的处理，还用一种方法叫做裁剪方法clip()。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>裁剪区域</title>
<script type="text/javascript">
function Draw(){
//使用裁剪区域绘图
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var newImg=new Image(); //使用Image()构造函数创建图像对象
newImg.src="../img/3.jpg";
newImg.onload=function(){
//设置一个圆形的裁剪区域
ArcClip(context);
//从左上角开始绘制图像
context.drawImage(newImg,0,0);
//设置全局半透明
context.globalAlpha=0.6;
//使用路径绘制的矩形
FillRect(context);
}
}
function ArcClip(context){
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);//设置一个圆形的绘图路径
context.clip();  //裁剪区域
}
//使用路径绘制的矩形
function FillRect(context){
context.beginPath();
context.rect(150,150,90,90);
context.fillStyle="#f90";
context.fill();
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
</body>
</html>


高大上效果



注：在绘制图片之前，，首先使用方法 ArcClip(context)设置一个圆形裁剪的区域：先设置一个圆形的绘图路径，再调用 clip()方法，即完成了区域的裁剪。接着绘制了图像，把加载的图片，从画布的左上角开始绘制，可以看见，只有在裁剪区域里才有绘制。最后，又使用了路径的方法回执了矩形，并填充了半透明的颜色，也只在裁剪区域内有绘制。

把Draw函数做一下改动就可以取消裁剪区域

function Draw2(){
//使用裁剪区域绘图
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var newImg=new Image(); //使用Image()构造函数创建图像对象
newImg.src="../img/3.jpg";
newImg.onload=function(){
//保存当前状态
context.save();
//设置一个圆形的裁剪区域
ArcClip(context);
//从左上角开始绘制图像
context.drawImage(newImg,0,0);
//恢复被保存的状态
context.restore();
//设置全局半透明
context.globalAlpha=0.6;
//使用路径绘制的矩形
FillRect(context);
}
}
function ArcClip(context){
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);//设置一个圆形的绘图路径
context.clip();  //裁剪区域
}
//使用路径绘制的矩形
function FillRect(context){
context.beginPath();
context.rect(150,150,90,90);
context.fillStyle="#f90";
context.fill();
}
window.addEventListener("load",Draw2,false);


仔细观察一下与上幅图的区别



在裁剪区域之前，首先调用了save()方法保存了当前上下文的状态；在裁剪区域内绘制了图片之后，调用了 restore()方法恢复了上下文状态，即裁剪区域之前的状态，所以在接下来的绘图中不再受裁剪区域限制。如图中的矩形已经超出了裁剪区域的范围。

使用文本

在Canvas中，也可以绘制文本。可以使用填充的方法绘制，也可以使用描边的方法绘制，并且在绘制文字之前，还可以设置文字的文字样式和对齐方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制文本</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//填充方式绘制文本
context.fillStyle="#f90";
context.font="bold 36px impact";
//fillText(text,x,y,maxwidth) text要绘制的文本，x起点横坐标，y纵坐标,maxwidth可选参数，表示文本的最大宽度
context.fillText("Hello World!",10,50);
//描边方式绘制文本
context.strokeStyle="#90";
context.font="bold italic 36px impact";
context.strokeText("Hello World!",10,100);

//度量绘制文本宽度
var text="Hllo World!";
context.fillStyle="#90";
context.font="bold 30px impact";
//度量文本是以当前设置的文本样式为基础。
var tm=context.measureText(text);
//根据已经设置的文本样式度量文本
context.fillText(text,10,150);
context.fillText(tm.width,tm.width+15,150);
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

呐呐，运行效果，感觉如何



阴影效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制文本</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//设置阴影属性
context.shadowColor="#666"; //颜色
context.shadowOffsetX=5;//阴影的横向位移量，向右为正，左为负
context.shadowOffsetY=5; //纵向位移量，向下为正，上为负
context.shadowBlur=5.5; //高斯模糊，值越大，阴影边缘越模糊

//填充方式绘制文本
context.fillStyle="#f90";
context.font="bold 36px impact";
context.fillText("Hello World!",10,50);

context.fillStyle="#90";
context.arc(100,100,30,0,Math.PI*2,false);
context.fill();
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

是不是再次感觉到了神奇



操作像素

在Canvas中，绘图API还提供了像素级的操作方法，分别是：createImageData()。getImageData()和putImageData()。使用这些方法，可以直接操纵底层的像素数据。

先来体会一下效果



实现方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作像素</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var newImg=new Image();
newImg.src="../img/3.jpg";
newImg.onload=function(){
context.drawImage(newImg,0,0,400,300);
context.save();
//获取图像数据
var imageData=context.getImageData(0,0,400,300);
//修改ImageData对象的data数据，处理为反向
for(var i=0,n=imageData.data.length;i<n;i+=4){
//红色部分
imageData.data[i+0]=255-imageData.data[i+0];
//绿色部分
imageData.data[i+1]=255-imageData.data[i+1];
//蓝色部分
imageData.data[i+2]=255-imageData.data[i+2];
}
//绘制该图像数据
context.putImageData(imageData,200,150);
}

}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

注：这个也要放在服务器上运行了，不能直接本地测试
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 网页 Canvas
相关文章推荐
新的分享
章节导航