时间:2021-05-08
一、什么是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()所绘制的独立的形状
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 . 阴影和渐变
阴影主要是以下几个属性值
创建一个放射渐变 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)}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用HTML5制作时钟复制代码代码如下:html5时钟varClock=function(canvas,options){this.canvas=canvas;
是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图,本文使用canvas标签和Java
初识canvas元素HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和div比较接近(其实他应该属于inline-block),而提供了许多接口
Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果:这
在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下:varcanvas=document.getElementByI