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

来源：互联网发布：c语言实现面向对象编辑：程序博客网时间：2024/05/16 19:21

使用图像

在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>

注：这个也要放在服务器上运行了，不能直接本地测试

阅读全文

0 0