<canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebGL两大块内容来一起来学习,但是WebGL觉得比较少用到,而且难,所以不讲了!
一、了解canvas
<canvas id=‘draw’ width=‘200’ height=‘200' > nothing </canvas>,这是便是一个基本canvas元素的写法了,但是我们必须通过javascript来动态获得,那么需要这样:

 var draw = document.getElementById(‘draw’);
//确定是否支持canvas
if(draw.getContext){
//这样就取得绘图上下文对象的引用,画图便可以开始了!
var context = draw.getContext(‘2d’);
//取得图像的数据uri,显示图像
var imageuri = draw.toDataURL(‘image/png’);
var img = document.createElement(‘img’);
img.src= imageuri;
document.body.appendChild(img);
}

二、2D上下文
对于2D上下文的坐标是开始于canvas元素的左上角的,原点的坐标为(0,0),x轴越往右越大,y轴越往下越大就算但画布的原坐标发生translate也不例外,如下图:

填充(使用指定样式[颜色、渐变、图像、模式等]填充图形)和描边(图形的边缘画线)分别为fillStyle和strokeStyle,需要注意一点,fillStyle和strokeStyle会被延用至重新设置这两个值!

 var draw = document.getElementById(‘draw’);
if(draw.getContext){
var context = draw.getContext(‘2d’);
context.strokeStyle = “#”;
context.fillStyle = ‘#0000ff’;
}

绘制矩形,有以下方法fillRect()、strokeRect()、clearRect()的方法,都是一样的,传入四个参数,矩形的x坐标、矩形的y坐标、矩形的宽度width、矩形的高度height,

 var draw = document.getElementById(‘draw’);
if(draw.getContext){ var context = draw.getContext(‘2d’);
//绘制黑色矩形
context.strokeStyle = “#”;
context.strokeRect(,,,);
//绘制黑色矩形
context.strokeStyle = “#”;
context.fillRect(,,,); //在两个填充矩形重叠的地方清除一个小矩形
context.clearRect(,,,); //绘制描边矩形
context.fillStyle = ‘#0000ff’;
context.fillRect(,,,); }

绘制路径,2d上下文有很多在画布上绘制路径的方法,可以创造出复杂的形状和线条。要绘制路径,首先需要调用beginPath()方法,
arc(x,y,radius,startAngle,endAngle,counterclockwise),意思是以(x,y)为圆心,radius为半径,counterclockwise的值为false的时候顺时针画圆(或圆弧),开始角度startAngle,结束角度endAngle,用弧度表示;
arcTo(x1,y1,x,y,radius),意思是从(x1,y1)到(x,y),以radius为半径,画一条弧线;
lineTo(x,y),意思是从上一个点画一条直线至(x,y);
moveTo(x,y),意思是将绘图的游标移至(x,y),也就是从此点开始绘制;
rect(x,y,width,height),这是画个矩形,就不多说了;
bezierCurveTo(x1,y1,x2,y2,x,y),意思从上一个点开始,是以(x1,y1)、(x2,y2)为控制点,(x,y)为终点的三次贝尔塞曲线;

quadraticCurveTo(cx,cy,x,y),意思是从上一个点开始,是以(cx,cy)为控制点,(x,y)为终点的二次贝尔塞曲线。

那么接下来,创建路径之后,我们可以又怎么这几种选择:

使用closePath(),关闭路径,绘制一条连接至起点的线条;

使用fill()、stroke(),对路径进行填充或是描边,前提是设置了(fillStyle、strokeStyle)

使用clip(),创建一个剪切区域

如果我们想在路径关闭之前,判断某个点是否在路径上,可以这样来做

if(context.isPointInPath(,)){
alert("点击这里http://t.cn/RUbL4rP,就可以跳转,快来看看阿!");
}

 绘制文本,有图,就有文本,主要有两个方法,fillText()和strokeText(),传入四个参数,str(字符串)、x坐标、y坐标、最大像素宽度(超过此值,将会自动收缩),当然这两个方法是以以下三个属性(font、textAlign、textBaseline)为基础的,当然要注意,这两个方法也是使用fillStyle和strokeStyle来做填充和描边滴,之后也有demo更新到github上面去!

context.font="blod 14px Arial";
context.textAlign = "center";//"start" "end" "left" "right"
context.textBaseline = "middle";//"top" "bottom" "hanging" "alphabetic" "ideographic" context.fillText("工资低,被迫下海,还望大家多多支持,多多棒槌,宣传一下下",,);

有时候,我们需要将我们的文本控制在某一个区域中的时候,那么会用到measureText()方法,传入一个参数(我们需要显示的字符串),得到的对象里面有个width属性,返回最佳的width,假如说我们现在想在width=150px的画布上显示合适的字体的话,可以这样

 var font_size = 40px;
context.font = font_size+''px arial";
while(context.measureText("工资低,被迫下海,还望大家多多支持,多多棒槌,宣传一下下")>600px){
font_size--;
context.font = font_size+''px arial";
}
context.fillText("工资低,被迫下海,还望大家多多支持,多多棒槌,宣传一下下",,);

绘制变换,即是如css3中transform变换,创建绘制上下文时,会以默认值初始化变换矩阵,在默认的变换矩阵中下,所有处理是直接绘制。有如下这些变化:

rotate(angle);//angle是弧度

scale(x1,y1);//放大缩小,在x方向乘以x1,在y方向乘以y1

translate(x,y);//将坐标原点移动到(x,y),好了(x,y)它就变成原点了

transform(m1_1,m1_2,m2_1,m2_2,dx,dy);//直接改变矩阵

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy);//设置矩阵,对于矩阵详解:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/

排列方式:,其对应的排列方式是这样的,与transform: matrix(a,b,c,d,e,f);还是不一样滴!

绘制图像,把一副图像绘制到画布上,,可以使用drawImage()方法,可以这样

 var image = document.images[]; //获取文档中第一张图像
context.drawImge(image,x,y,width,height,rx,ry,rwidth,rheight);//各个参数分别是:image图像对象,源图像的x坐标、源图像的y坐标,源图像的宽度,源图像的高度,目标图像的x坐标,目标图像的y坐标,目标图像的宽度,目标图像的高度,一般只需要前五个参数,就可以画出一个图像出来了! //可以怎么理解,如context.drawImage(image,0,10,50,50,0,100,40,60);原始图像是以(0,10)为起点,高宽都为50px,但我们想要它实际显示在(0,100),宽40,高60,感觉实际上并没什么用

 阴影,有以下这几个属性:

var context = drawing.getContext('2d');
context.shadowColor = "#000";//阴影颜色
context.shadowOffsetX = ;//阴影x的偏移量
context.shadowOffsetX = ;//阴影y的偏移量
context.shadowBlur = ;//阴影的模糊距离

 渐变,分为线性渐变和径祥渐变,分别是createLinearGradient()和createRadialGradient(),使用如下:

 var gradient = context.createLinearGradient(,,,);//创建一个线性渐变区域,矩形区域,要使渐变覆盖整个矩形,需要有时还需要匹配一下坐标

 gradient.addColorStop(,"white"); //创建色标的开始位置信息

 gradient.addColorStop(,"black");//创建色标的结束位置信息

 context.fillStyle= gradient;

 conetxt.fillRect(,,,);

 var gradient = context.createRadialGradient(,,,,,);//创建一个径向渐变区域,这里是由两个同心圆组成的,(50,50)为圆的中心点,一个半径为10,一个半径为30,便可以向外扩散,形成径向渐变了

 gradient.addColorStop(,"white"); //创建色标的开始位置信息

 gradient.addColorStop(,"black");//创建色标的结束位置信息

 context.fillStyle= gradient;

 conetxt.fillRect(,,,);

 模式,意思就是重复的图像来填充画布了,也可以叫做纹理填充,一般使用的方法createPattern,使用如下:

 var image = document.images[];

 var pattern= context.createPattern(image,'repeat');//对应有repeat、repeat-x、repeat-y、no-repeat

 context.fillStyle = pattern;

 conetext.fillRect(,,,);

对于canvas绘图的基础就差不多怎么多了,以后还需努力学习,将其用在实际项目上,而对于webGL这种3d上下文就暂时不去学习,这几天看得晕晕的,感觉目前对自己也没什么用处!

canvas绘图基础的更多相关文章

  1. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  2. Canvas绘图基础(一)

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  3. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  4. canvas绘图基础及基于粒子系统的雪花飘落

    canvas是html中的一个元素,可以通过js操控绘图! 可以绘制各种图形,各种填充样式! 绘制时可以进行旋转,缩放,平移,但并不是很灵活! 有一对比较好用的方法是save restore! sav ...

  5. HTML5 canvas绘图基础(电子名片生成器源码)

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  6. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  7. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

  8. HTML5自学笔记[ 14 ]canvas绘图基础2

    canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...

  9. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

随机推荐

  1. [js]js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了

    js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了 fn(); // 声明+定义 js中声明过一次的变量,之后在不会重新声明了 function fn() { console.log( ...

  2. C#设计模式(10)——组合模式(Composite Pattern)(转)

    一.引言 在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...

  3. Spark实时案例

    1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...

  4. HDU 2874 Connections between cities(LCA Tarjan)

    Connections between cities [题目链接]Connections between cities [题目类型]LCA Tarjan &题意: 输入一个森林,总节点不超过N ...

  5. mysql----------mysql5.7.11导入sql文件时报错This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled

    1.导入sql文件出现如下错误. [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in ...

  6. ATM目录结构

    作者:高江平版本:1.0程序介绍: 实现ATM常用功能程序结构:atm实现|——README|——atm #ATM主程序目录| |——bin #ATM执行文件目录| | |——__init__.py| ...

  7. sql 小技巧

    declare @pids varchar(max)='' ),pid)+','+@pids from product where pname like '%red%' select @pids

  8. PHP插入数据库代码,编辑,删除

    插入代码 $action=$_GET['action']; switch($action){ //添加记录 case"add"; $mail = trim(htmlspecialc ...

  9. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  10. Hdu2033 人见人爱A+B (贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2033 人见人爱A+B Time Limit: 2000/1000 MS (Java/Others)   ...