html5使用Canvas绘图的使用方法


Posted in HTML / CSS onNovember 21, 2017

一、什么是Canvas

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(10,10,50,50);
    context.fillRect(10,10,50,50);
    
    //绘制绿色矩形,红色描边
    context.fillStyle = '#0f0';
    context.strokeStyle = '#f00';
    context.strokeRect(10,10,50,50);
    context.fillRect(10,10,50,50);
    
    //在两个矩形重叠的地方清除一个小矩形
    context.clearRect(40,40,10,10);
}

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(100,100,99,0,2*Math.PI,false);
    //绘制内圆
    context.moveTo(194,100);
    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.stroke();
    context.strokeStyle = '#f00';            
}

6 . 绘制文本,主要有两个方法,fillText(),strokeText(),都接收四个参数|text(要绘制的文本)|x|y|最大像素宽度(可选)|,这两个方法都已下列三个属性为基础

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('12',100,20);

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(100,100,99,0,2*Math.PI,false);
    //绘制内圆
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //变换原点
    context.translate(100,100);
    //旋转表针
    context.rotate(1)
    //绘制分针
    context.moveTo(0,0);
    context.lineTo(0,-85);
    //绘制时针
    context.moveTo(0,0);
    context.lineTo(-65,0);
    //描边路径
    context.stroke();
    context.strokeStyle = '#f00';            
}

8 . 绘制图像,drawImage()

var img = document.getElementByTagNames('image')[0];
 context.drawImage(img,0,10,50,50,0,100,40,60);

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

9 . 阴影和渐变

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

  1.  shadowColor
  2.  shadowOffsetX : X轴阴影偏移量
  3.  shadowOffsetY : Y轴阴影偏移量
  4.  shadowBlur : 模糊像素数,默认0,不模糊
var context = draw.getContext('2d');
 //设置阴影
 context.shadowColor = 'rgba(210,210,210,.5)';
 context.shadowOffersetX = '5';
 
 渐变 创建一个新的线性渐变 createLinearGradient()方法,有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标
 var gradient = context.createLinearGradient(30,30,70,70);
 gradient.addColorStop(0,'#fff');    //0表示开始
 gradient.addColorStop(1,'#000');    //1表示结束
 //使用定义好的渐变属性
 context.fillStyle = gradient;    //填充的时候放入渐变
 context.fillRect(30,30,50,50);

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

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

var imgdata = context.getImageData(0,0,100,100);
 var data = imgdata.data,
     red = data[0],
     green = data[1],
     blue = data[2],
     alpha = data[3];
  
//实现一个灰色过滤器
var draw = document.getElementById('draw');
if(draw.getContext){
    var context = draw.getContext('2d');
    var img = document.getElementsByTagName('image')[0],
        imageData,data,
        i,len,average,
        red,green,blue,alpha;
    //绘制原始图像
    context.drawImage(img,0,0,100,100);
    //获取图像数据
    imageData = context.getImageData(0,0,img.width,img.height);
    data = imageData.data;
    for(i=0,len=data.length;i<len;i+=4){
        red = data[i];
        green = data[i+1];
        blue = data[i+2];
        alpha = data[i+3];
        //计算rgb的平均值
        average = Math.floor((red+green+blue)/3);
        //设置颜色值
        data[i] = average;
        data[i+1] = average;
        data[i+2] = average;
    }   
    imageData.data = data;
    //把数据绘制在画布
    context.putImageData(imageData,0,0)
}

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

HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
详解HTML5新增标签
Nov 27 #HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 #HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 #HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 #HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 #HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 #HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
javascript实现的DES加密示例
2013/10/30 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python中的浮点数原理与运算分析
2017/10/12 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python 移动光标位置的方法
2019/01/20 Python
Python中qutip用法示例详解
2020/10/02 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
社会调查研究计划书
2014/05/01 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript