html5应用Canvas制图的应用方式

日期:2021-02-27 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

1、甚么是Canvas

Canvas 是H5的1一部分,容许脚本制作語言动态性3D渲染图象。Canvas 界定1个地区,能够由html特性界定该地区的宽高,javascript编码能够浏览该地区,根据1整套详细的制图作用(API),在网页页面上3D渲染动态性实际效果图。

2、Canvas 能做甚么

手机游戏:没什么疑惑,手机游戏在HTML5行业具备至关重要的影响力。HTML5在根据Web的图象显示信息层面比Flash更为立体式、更为精致。

图表制做:图表制做经常被人们忽视,但不管公司內部還是公司间沟通交流协作都离不开图表。如今1些开发设计者应用HTML/CSS进行标志制做。自然,应用SVG(可放缩矢量图型)来进行图表制做也是是非非常好的方式。

字体样式设计方案:针对字体样式的自定3D渲染将彻底能够根据Web,应用HTML5技术性开展完成。

图型编写器:图型编写器可以100%根据Web完成。

别的可嵌入网站的內容:相近图表、声频、视頻,也有很多元素可以更好地与Web结合,而且不必须任何软件。

3、Canvas基础用法

1、应用<canvas>务必先设定其width和height特性,特定可制图地区尺寸,只特定宽高不加上款式或绘图图象的话,在网页页面中将看不见该元素。

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

2、绘图图象的话,大家最先要取到canvas并启用getContext()方式,随后传入左右文姓名(2D/三d),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()获得到的是1串base64的标识符串
    var drawURL = draw.toDataURL('image/png');
    var image = document.createElement('img');
    image.src = drawURL;
    document.body.appendChild(image);           
}

4、绘图矩形框,关键有3个方式,fillRect()为矩形框填充色调、strokeRect()为矩形框描边、clearRect()消除矩形框。这3个方式都接受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);
    
    //在两个矩形框重合的地区消除1个小矩形框
    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),不画线。能够用来改动所谓的上1点座标*

arcTo(x1,y1,x2,y2,radius)
从上1点刚开始绘图1条曲线图到(x2,y2),而且以给定的radius穿过(x1,y1)

lineTo(x,y) 从上1点刚开始绘图1条平行线,到(x,y)

rect(x,y,width,height)
从(x,y)刚开始绘图1个矩形框,宽高为width、height。这个方式绘图的是矩形框相对路径,而非strokeRect()和fillRect()所绘图的单独的样子

//接下来绘图1个不带数据的数字时钟  
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(),都接受4个主要参数|text(要绘图的文字)|x|y|最大像素宽度(可选)|,这两个方式都已以下3个特性为基本

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,⑻5);
    //绘图时针
    context.moveTo(0,0);
    context.lineTo(⑹5,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';
 
 渐变色 建立1个新的线形渐变色 createLinearGradient()方式,有4个主要参数|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);
 

建立1个放射性渐变色 createRadialGradient(),6个主要参数|x1|y2|radius1|x2|y2|radius2|各自为第1个圆心和半径第2个圆心和半径,用法和线形渐变色同样

10 . 应用图象数据信息,能够根据getImageData()获得初始图象数据信息。4个主要参数|x|y|w|h|。每一个ImageData目标有3个特性,width/height/data,data是1个数字能量数组,內部存着每个像素的数据信息,每一个元素的值介于0⑵55之间

 var imgdata = context.getImageData(0,0,100,100);
 var data = imgdata.data,
     red = data[0],
     green = data[1],
     blue = data[2],
     alpha = data[3];
  
//完成1个灰色过虑器
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)
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。