HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

2021-10-17 20:27:36

Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（API）,在网页上渲染动态效果图。

二、Canvas 能做什么

游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。

图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。

字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。

图形编辑器：图形编辑器能够100%基于Web实现。

其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

三、Canvas基本用法

1.使用<canvas>必须先设置其width和height属性，指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话，在页面中将看不到该元素。

 <canvas id='draw' width='200px' height='200px'></canvas>

2 .绘制图像的话，我们首先要取到canvas并调用getContext()方法，然后传入上下文名字（2D/3D）,2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000

 var draw = document.getElementById('draw');

 //确认浏览器是否支持<canvas>元素

 if(draw.getContext){

     var context = draw.getContext('2d');

     //给context绘制红色的边框

     context.strokeStyle = '#f00';

     //内部填充大草原的颜色

     context.fillStyle = '#0f0';

 }

3 .使用toDataURL()方法，可以导出<canvas>元素上绘制的图像

 var draw = document.getElementById('draw');

 if(draw.getContext){

     //显示图像，toDataURL()获取到的是一串base64的字符串

     var drawURL = draw.toDataURL('image/png');

     var image = document.createElement('img');

     image.src = drawURL;

     document.body.appendChild(image);

 }

4 .绘制矩形，主要有三个方法，fillRect()为矩形填充颜色、strokeRect()为矩形描边、clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形的左上角坐标和宽高

 var draw = document.getElementById('draw');

 //确认浏览器是否支持<canvas>元素

 if(draw.getContext){

     var context = draw.getContext('2d');

     //绘制红色矩形,绿色描边

     context.fillStyle = '#f00';

     context.strokeStyle = '#0f0';

     context.strokeRect(,,,);

     context.fillRect(,,,);

     //绘制绿色矩形,红色描边

     context.fillStyle = '#0f0';

     context.strokeStyle = '#f00';

     context.strokeRect(,,,);

     context.fillRect(,,,);

     //在两个矩形重叠的地方清除一个小矩形

     context.clearRect(,,,);

 }

5 .绘制路径，通过路径可以创造出复杂的形状和线条，要绘制路径，首先要调用beginPath()方法，再通过以下方法来实际的绘制路径

 arc(x,y,radius,startAngle,endAngle,conterclockwise)

 (x,y)圆心坐标、radius半径、(startAngle,endAngle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true)

 moveTo(x,y) 将游标移动到(x,y)，不画线。可以用来修改所谓的上一点坐标*

 arcTo(x1,y1,x2,y2,radius)

 从上一点开始绘制一条曲线到(x2,y2),并且以给定的radius穿过(x1,y1)

 lineTo(x,y) 从上一点开始绘制一条直线，到(x,y)

 rect(x,y,width,height)

 从(x,y)开始绘制一个矩形，宽高为width、height。这个方法绘制的是矩形路径，而非strokeRect()和fillRect()所绘制的独立的形状

 //接下来绘制一个不带数字的时钟

 var draw = document.getElementById('draw');

 if(draw.getContext){

     var context = draw.getContext('2d');

     //开始路径

     context.beginPath();

     //绘制外圆

     context.arc(,,,,*Math.PI,false);

     //绘制内圆

     context.moveTo(,);

     context.arc(,,,,*Math.PI,false);

     //绘制分针

     context.moveTo(,);

     context.lineTo(,);

     //绘制时针

     context.moveTo(,);

     context.lineTo(,);

     //描边路径

     context.stroke();

     context.strokeStyle = '#f00';

 }

 font文字样式，大小，字体等

 textAlign 文本对其方式|start|end|left|right|center|

 textBaseline 文本的基线|top|hanging|middle|alphabetic|ideographic|bottom|

 //在表盘绘制12点

  context.font = 'bold 12px Arial';

  context.textAlign = 'center';

  context.textBaseline = 'middle';

  context.fillText('',,);

7 . 变换

  rotate(angel) 围绕原点旋转图像angle弧度

  scale(scaleX,scaleY) 缩放图像，x*scaleX,y*scaleY  默认1

  translate(x,y) 将坐标原点移动到(x,y)

  var draw = document.getElementById('draw');

  if(draw.getContext){

     var context = draw.getContext('2d');

     //开始路径

     context.beginPath();

     //绘制外圆

     context.arc(,,,,*Math.PI,false);

     //绘制内圆

     context.moveTo(,);

     context.arc(,,,,*Math.PI,false);

     //变换原点

     context.translate(,);

     //旋转表针

     context.rotate()

     //绘制分针

     context.moveTo(,);

     context.lineTo(,-);

     //绘制时针

     context.moveTo(,);

     context.lineTo(-,);

     //描边路径

     context.stroke();

     context.strokeStyle = '#f00';

 }

8 . 绘制图像，drawImage()

  var img = document.getElementByTagNames('image')[];

  context.drawImage(img,,,,,,,,);

  9个参数: 要绘制的图像 原图像|x|y|w|h|  目标图像|x|y|w|h|

9 . 阴影和渐变

 阴影主要是以下几个属性值

  shadowColor

  shadowOffsetX : X轴阴影偏移量

  shadowOffsetY : Y轴阴影偏移量

  shadowBlur : 模糊像素数，默认0，不模糊

  var context = draw.getContext('2d');

  //设置阴影

  context.shadowColor = 'rgba(210,210,210,.5)';

  context.shadowOffersetX = '';

  渐变 创建一个新的线性渐变 createLinearGradient()方法，有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标

  var gradient = context.createLinearGradient(,,,);

  gradient.addColorStop(,'#fff');    //0表示开始

  gradient.addColorStop(,'#000');    //1表示结束

  //使用定义好的渐变属性

  context.fillStyle = gradient;    //填充的时候放入渐变

  context.fillRect(,,,);



 创建一个放射渐变 createRadialGradient(),六个参数|x1|y2|radius1|x2|y2|radius2|分别为第一个圆心和半径第二个圆心和半径，用法和线性渐变相同

10 . 使用图像数据，可以通过getImageData()取得原始图像数据。四个参数|x|y|w|h|。每个ImageData对象有三个属性，width/height/data，data是一个数组，内部存着每一个像素的数据,每个元素的值介于0-255之间

  var imgdata = context.getImageData(,,,);

  var data = imgdata.data,

      red = data[],

      green = data[],

      blue = data[],

      alpha = data[];

 //实现一个灰色过滤器

 var draw = document.getElementById('draw');

 if(draw.getContext){

     var context = draw.getContext('2d');

     var img = document.getElementsByTagName('image')[],

         imageData,data,

         i,len,average,

         red,green,blue,alpha;

     //绘制原始图像

     context.drawImage(img,,,,);

     //获取图像数据

     imageData = context.getImageData(,,img.width,img.height);

     data = imageData.data;

     for(i=,len=data.length;i<len;i+=){

         red = data[i];

         green = data[i+];

         blue = data[i+];

         alpha = data[i+];

         //计算rgb的平均值

         average = Math.floor((red+green+blue)/);

         //设置颜色值

         data[i] = average;

         data[i+] = average;

         data[i+] = average;

     }

     imageData.data = data;

     //把数据绘制在画布

     context.putImageData(imageData,,)

 }

码农公寓

二、Canvas 能做什么

三、Canvas基本用法

相关文章