JavaScript基础——使用Canvas绘图


Posted in Javascript onNovember 02, 2016

最近在学习Canvas画图的方法,最近有时间做了个整理,如下:

1、基本用法

要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息。例如:

<canvas id="drawing" width="200" height="200">A Drawing of something</canvas>

使用toDataURL()方法,可以导出在<canvas>元素上绘制的图像。

var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//取得图像的数据URI 
var imgURI=drawing.toDataURL("image/png"); 
alert(imgURI); 
//显示图像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
}

2、2D上下文

(1)、填充和描边

填充:用指定的样式填充图形;描边:就是只在图形的边缘画线。fillStyle和strokeStyle两个属性的值可以是字符串、渐变对象或模式对象。

var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象 
var context=drawing.getContext("2d");</span>
<span style="font-size:14px;">//此程序由于没有图像,填充和描边不会显示 
context.strokeStyle="#0000ff"; 
context.fillStyle="red"; 
}

(2)、绘制矩形

  矩形是唯一一种可以直接在2D上下文绘制的形状。与矩形有关的方法包括:fillRec()、strokeRect()和clearRect()。这三个方法都能接收4个参数:x坐标、y坐标、宽度和高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//绘制红色描边矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//绘制半透明的蓝色描边矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在两个矩形重叠的地方清除一个小矩形 
context.clearRect(30,30,30,30); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

下面为使用toDataURL()方法,导出在canvas元素上绘制的图像程序如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<br /> 
<h3>下面为使用toDataURL()方法,导出在canvas元素上绘制的图像。</h3> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//绘制红色描边矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//绘制半透明的蓝色描边矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在两个矩形重叠的地方清除一个小矩形 
context.clearRect(30,30,30,30); 
//取得图像的数据URI 
var imgURI=drawing.toDataURL("image/png"); 
//显示图像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

JavaScript基础——使用Canvas绘图

(3)、绘制路径

要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="420" height="420" 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"); 
//开始路径 
context.beginPath(); 
/*绘制弧线,使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 
以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngle 
和endAngle。最后一个参数表示是否按逆时针方向计算,值为false表示顺时针方向计算。 
*/ 
context.arc(130,130,90,0,2*Math.PI,false); 
/*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给 
定的半径radius穿过(x1,y1) 
*/ 
context.arcTo(310,220,400,130,80) 
/*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线,到(x,y)为 
 止,并且以(c1x,c1y)和(c2x,c2y)为控制的。 
*/ 
context.bezierCurveTo(320,210,400,250,310,300); 
/*lineTo(x,y):从上一点开始绘制一条直线,到(x,y)为止*/ 
context.lineTo(0,300); 
context.moveTo(130,220); 
context.lineTo(100,300); 
/*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线,到(x,y)为止,并且 
以(cx,cy)作为控制点 
*/ 
context.quadraticCurveTo(40,380,130,400); 
context.lineTo(450,400); 
/*rect(x,y,width,height):从点(x,y)开始绘制一个矩形路径*/ 
context.rect(80,80,100,100) 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法,这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//开始路径 
context.beginPath(); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到(x,y),不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//绘制分针 
context.moveTo(100,100); 
context.lineTo(100,15); 
//绘制时针 
context.moveTo(100,100); 
context.lineTo(35,100); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法,这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

(4)、绘制文本

绘制文本主要有两个方法:fillText()和strokeText()。这两个方法接收4个参数:要绘制的文本字符串、x坐标,y坐标和可选的最大像素宽度。这两个方法有三个属性:font、textAlign和textBaseline。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//开始路径 
context.beginPath(); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到(x,y),不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//绘制分针 
context.moveTo(100,100); 
context.lineTo(100,20); 
//绘制时针 
context.moveTo(100,100); 
context.lineTo(35,100); 
//添加文字“12” 
context.font="bold 14px Arial"; 
context.textAlign="center"; 
context.textBaseline="middle";//文本的基线 
context.fillText("12",100,15); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法,这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

(5)、变换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//开始路径 
context.beginPath(); 
//缩放图像 
/*scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY。 
scaleX和scaleY的默认值都是1.0 
*/ 
context.scale(0.8,0.8); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到(x,y),不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//变换原点 
/*translate(x,y):将坐标原点移动到(x,y)。执行这个变换后,坐标(0,0)会变成之 
前由(x,y)表示的点 
*/ 
context.translate(100,100); 
//添加文字“12” 
context.font="bold 14px Arial"; 
context.textAlign="center"; 
context.textBaseline="middle";//文本的基线 
context.fillText("12",0,-85); 
//旋转表针 
/*rotate(angle):围绕原点旋转图像angle弧度*/ 
context.rotate(1); 
//绘制分针 
context.moveTo(0,0); 
context.lineTo(0,-80); 
//绘制时针 
context.moveTo(0,0); 
context.lineTo(-65,0); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法,这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

(6)、绘制图像

var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
var image=document.getElementById("image"); 
context.drawImage(image,10,10,20,20);//起点为(10,10),图像大小会变成20x20像素; 
}

(7)、阴影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//设置阴影 
context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色 
context.shadowOffsetX=5;//设置形状或路径x轴方向的阴影偏移量,默认值为0; 
context.shadowOffsetY=5;//设置形状或路径y轴方向的阴影偏移量,默认值为0; 
context.shadowBlur=4;//设置模糊的像素数,默认值为0,即不模糊。 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,1)"; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

(8)、渐变

  渐变由CanvasGradient实例表示,很容易通过2D上下文来创建和修改。要创建一个新的先行渐变,可以调用createLinearGradient()方法。这个方法接收4个参数:起点的x坐标,起点的y坐标,终点的x坐标,终点的y坐标。创建渐变对象后,下一步就是使用addColorStop()方法来指定色标,这个方法接收两个参数:色标位置和css颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数据。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//设置渐变 
var gradient=context.createLinearGradient(30,30,70,70); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

为了确保渐变与形状对齐,有时候可以考虑使用函数来确保坐标合适,例如:

function createRectLinearGradient(context,x,y,width,height){ 
  return context.createLinearGradient(x,y,x+width,y+height); 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//设置渐变 
var gradient=createRectLinearGradient(context,30,30,50,50); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
//确保渐变与形状对齐 
function createRectLinearGradient(context,x,y,width,height){ 
  return context.createLinearGradient(x,y,x+width,y+height); 
} 
</script> 
</body> 
</html>

 JavaScript基础——使用Canvas绘图

要创建径向渐变(或放射渐变),可以使用createRadialGradient()方法,这个方法接收6个参数,对应着两个圆的圆心和半径,
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" 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"); 
//设置渐变 
var gradient=context.createRadialGradient(55,55,10,55,55,30); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

JavaScript基础——使用Canvas绘图

(9)、模式

模式其实就是重复的图像,可以用来填充或描边图形

var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
  var image=document.images[0]; 
pattern=context.createPattern(image,"repeat"); 
  context.fillStyle=pattern; 
context.fillRect(10,10,150,150); 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
Three.js基础部分学习
Jan 08 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
vue实现城市列表选择功能
Jul 16 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
js实现砖头在页面拖拉效果
Nov 20 #Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 #Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 #Javascript
jQuery图片切换动画特效
Nov 02 #Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 #Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
You might like
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
jquery简单体验
2007/01/10 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python中的下划线详解
2015/06/24 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
十佳班主任事迹材料
2014/01/18 职场文书
四风存在的原因分析
2014/02/11 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
购房个人委托书范本
2014/10/11 职场文书
个人优缺点总结
2015/02/28 职场文书
推荐信范文大全
2015/03/27 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
民主生活会意见
2015/06/05 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL