canvas绘图基本功

canvas绘图底子,canvas绘图

<canvas>成分是HTML5中的绘图成分,通过定义三个画布区域,然后使用javascript动态地在这里个区域内部绘制图形,对于2D和3D图形都足以绘制,我们将其分成2D上下文和WebGL两大块内容来一起来学学,不过WebGL认为少之甚少用到,並且难,所以不讲了!
一、了解canvas
<canvas id=‘draw’ width=‘200’ height=‘200′ > nothing
</canvas>,这是正是三个基本canvas元素的写法了,然而大家必得经过javascript来动态获得,那么供给如此:

图片 1 1 var
draw = document.getElementById(‘draw’); 2 //鲜明是还是不是帮忙canvas 3
if(draw.getContext){ 4
//那样就获得绘图上下文对象的援用,画图便能够伊始了! 5 var context =
draw.getContext(‘2d’); 6 //得到图像的数额uri,展现图像 7 var imageuri =
draw.toDataULacrosseL(‘image/png’); 8 var img = document.createElement(‘img’);
9 img.src= imageuri; 10 document.body.appendChild(img); 11 } View Code

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

填充(使用内定样式[颜色、渐变、图像、情势等]填充图形卡塔尔国和描边(图形的边缘画线卡塔尔国分别为fillStyle和strokeStyle,须求专一一点,fillStyle和strokeStyle会被延用至重新安装那五个值!

图片 21 var
draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3 var
context = draw.getContext(‘2d’); 4 context.strokeStyle = “#000”; 5
context.fillStyle = ‘#0000ff’; 6 } View Code

制图矩形,有以下措施fillRect()、strokeRect()、clearRect()的措施,都是千篇一律的,传入多少个参数,矩形的x坐标、矩形的y坐标、矩形的增长幅度width、矩形的冲天height,

图片 3 1 var
draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3 4 var
context = draw.getContext(‘2d’); 5 //绘制中蓝矩形 6 context.strokeStyle
= “#000”; 7 context.strokeRect(10,10,50,50); 8 //绘制花青矩形 9
context.strokeStyle = “#000”; 10 context.fillRect(30,30,50,50); 11 12
//在七个填充矩形重叠的地点消释三个小矩形 13
context.clearRect(40,40,10,10); 14 15 //绘制描边矩形 16
context.fillStyle = ‘#0000ff’; 17 context.fillRect(30,30,50,50); 18 19
} View Code

绘图路线,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)为尖峰的一回Bell塞曲线;

quadraticCurveTo(cx,cy,x,y),意思是从上七个点起来,是以(cx,cy)为调节点,(x,y)为极端的贰遍Bell塞曲线。

那么接下去,成立路线之后,大家得以又怎么那三种选拔:

动用closePath(),关闭路线,绘制一条连接至起源的线条;

利用fill()、stroke(),对路径进行填写或是描边,前提是安装了(fillStyle、strokeStyle卡塔尔国

选取clip(),创制二个区划区域

若果大家想在路径关闭此前,鉴定有个别点是还是不是在渠道上,能够这么来做

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

 绘制文本,有图,就有文件,首要有四个法子,fillText()和strokeText(),传入三个参数,str(字符串卡塔尔、x坐标、y坐标、最大像素宽度(抢先此值,将会活动收缩),当然那七个主意是以以下多少个属性(font、textAlign、textBaseline卡塔 尔(阿拉伯语:قطر‎为基本功的,当然要注意,这多个艺术也是应用fillStyle和strokeStyle来做填充和描边滴,之后也可以有demo更新到github上面去!

图片 4context.font=”blod
14px Arial”; context.textAlign = “center”;//”start” “end” “left” “right”
context.textBaseline = “middle”;//”top” “bottom” “hanging” “阿尔法betic”
“ideographic”
context.fillText(“薪水低,被迫下海,还望咱们多多照料,多多棒槌,宣传转手下”,100,20);
View Code

有的时候,我们需求将大家的公文调节在某二个区域中的时候,那么会用到measureText()方法,传入叁个参数(大家要求出示的字符串卡塔尔,拿到的对象里面有个width属性,再次来到最好的width,借使说大家明天想在width=150px的画布上展现合适的字体的话,可以那样

图片 51 var
font_size = 40px; 2 context.font = font_size+”px arial”; 3
while(context.measureText(“薪俸低,被迫下海,还望大家多都赐教,多多棒槌,宣传转手下”)>600px){
4 font_size–; 5 context.font = font_size+”px arial”; 6 } 7
context.fillText(“薪给低,被迫下海,还望大家多多点拨,多多棒槌,宣传转手下”,10,10);
View Code

绘图转变,正是如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);//设置矩阵,对于矩阵安详严整:

排列格局:图片 6,其对应的排列方式是这么的,与transform:
matrix(a,b,c,d,e,f);依旧不生龙活虎致滴!

制图图像,把风姿洒脱副图像绘制到画布上,,可以应用drawImage()方法,能够这么

图片 71 var
image = document.images[0]; //获取文书档案中率先张图像 2
context.drawImge(image,x,y,width,height,rx,ry,rwidth,rheight);//各类参数分别是:image图像对象,源图像的x坐标、源图像的y坐标,源图像的幅度,源图像的惊人,指标图像的x坐标,指标图像的y坐标,目的图像的大幅,指标图像的冲天,日常只须要前七个参数,就足以画出多个图像出来了!
3 4
//可以怎么明白,如context.drawImage(image,0,10,50,50,0,100,40,60);原始图疑似以(0,10)为源点,高宽都为50px,但大家想要它实质上显示在(0,100),宽40,高60,以为实际上并不妨用
View Code

 阴影,有以下那多少个属性:

图片 8var
context = drawing.getContext(‘2d’); context.shadowColor =
“#000”;//阴影颜色 context.shadowOffsetX = 5;//阴影x的偏移量
context.shadowOffsetX = 5;//阴影y的偏移量 context.shadowBlur =
4;//阴影的模糊间隔 View Code

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

图片 9 1 var
gradient =
context.createLinearGradient(30,30,70,70);//成立三个线性渐变区域,矩形区域,要使渐变覆盖全体矩形,需求有的时候还亟需卓殊一下坐标
2 3 gradient.addColorStop(0,”white”); //创造色标的发端地点消息 4 5
gradient.addColorStop(1,”black”);//创造色标的收尾地点新闻 6 7
context.fillStyle= gradient; 8 9 conetxt.fillRect(30,30,40,40); 10 11 12
13 var gradient =
context.createRadialGradient(50,50,10,50,50,30);//成立叁个径向渐变区域,这里是由五个同心圆组成的,(50,50)为圆的主干点,贰个半径为10,三个半径为30,便能够向外扩散,变成径向渐变了
14 15 gradient.addColorStop(0,”white”); //创设色标的从前地点音信 16 17
gradient.addColorStop(1,”black”);//创设色标的扫尾地点消息 18 19
context.fillStyle= gradient; 20 21 conetxt.fillRect(30,30,40,40); View Code

 模式,意思就是重复的图像来填充画布了,也得以称之为纹理填充,平时采用的诀窍createPattern,使用如下:

图片 101 var
image = document.images[0]; 2 3 var pattern=
context.createPattern(image,’repeat’);//对应有repeat、repeat-x、repeat-y、no-repeat
4 5 context.fillStyle = pattern; 6 7 conetext.fillRect(10,10,150,150);
View Code

对于canvas绘图的底子就基本上怎么多了,以后还需努力学习,将其用在其实项目上,而对于webGL这种3d上下文就一时不去读书,目前看得晕晕的,认为近年来对团结也没怎么用场!

 

canvas成分是HTML5中的绘图成分,通过定义贰个画布区域,然后接纳javascript动态地在此个区域里面绘制图形,对于…

  • #### 起头前的希图

1.主干用法

1.创立路线绘制线条(直线和折线、多边形)
 1. 绘制方法
        绘制之前要调用beginPath
     1)设置起点坐标值 
        moveTo(x,y);  

     2)设置终点(折点)坐标值
        lineTo(x,y);

  2. 绘制线条的属性
      1)设置线条的宽度,默认1px
        lineWidth

     2)设置线条端点的形状
        lineCap 
        butt - 平角
        round - 圆角
        square - 正方向

     3)设置两条线交点的形状
        lineJoin
        miter - 尖角 
        round - 圆角
        bevel - 斜角 canvas

     4)miterLimit - 配合lineJoin使用
       lineJoin设置为miter,该属性值设置尖角延伸范围

<canvas id=”drawing” width=”200″ height=”200″>A drawing of
something</canvas>

2.绘制图片
1、 按照图片原大小加载
     drawImage(img,x,y)
      img - 当前加载的图片
      x和y - 图片左上角的位置 
      注意: 必须要保证图片加载完毕(onload事件)后,再绘制图片

   2. 平铺图片
  var ptn = createPattern(img,type) 返回一个平铺对象,将这个对象作为将要绘制图像的填充颜色
   img : 平铺的图片
   type: 平铺的方式
  repeat/no-repeat/repeaet-x/repeat-y

 注意:必须要保证图片加载完毕(onload事件)后,再绘制图片,createPattern也要等到图片加载完毕后执行

    <canvas id="canvas" width="400px" height="400px" ></canvas>
        <script type="text/javascript">
            var painter=document.getElementById("canvas").getContext("2d");
            var img=new Image();
            img.src="class.jpg";
            //创建平铺对象
            img.onload=function(){
                var pat=painter.createPattern(img,"repeat");
            //将平铺对象作为填充颜色
            painter.fillStyle=pat;
            painter.fillRect(0,0,400,400);
            }
        </script>

图片 11

制图图片

<canvas id="myCanvas" width="800" height="800">
        当前浏览器不支持canvas,请更换浏览器
</canvas>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");

<script>

3.切割图片

运用clip()切割图片

<canvas id="canvas" width="400px" height="400px"></canvas>
        <script type="text/javascript">
            var painter=document.getElementById("canvas").getContext("2d");
            var img=new Image();
            img.src="class.jpg";
            img.onload=function(){
                painter.drawImage(img,0,0);
            }
            painter.beginPath();
//          painter.rect(0,0,100,100);
            painter.arc(96,84,84,0,2*Math.PI);
            //指定路径开始裁剪
            painter.clip();//反向选择裁剪图片

图片 12

切割图片

  • #### API

var drawing = document.getElementById(‘drawing’);

4.画布缩放旋转
   1、 scale(x,y); - 缩放
      x - 水平方向上的缩放
      y - 初值方向上的缩放

  2、translate(x,y) - 重新映射画布上的(0,0)位置

  3、rotate(); 旋转画布
    degrees * Math.PI / 180;

   4、 save() 保存当前画布属性、状态

   5、 resotre() 恢复画布属性状态
  1. 路径Path:

if(drawing.getContext){

5.用chart.js绘制图
<script type="text/javascript" src="Chart.js"></script>//首先导入Chart.js文件

<div id="" style="width:300px;height:300px;">
            <!--想要进一步设置图表的宽和高,需要再设置canvas的宽和高-->
            <canvas id="canvas" width="400px" height="400px"></canvas>
</div>

<script type="text/javascript">
        var painter=document.getElementById("canvas").getContext("2d");
                // For a pie chart
                /*
                 *new chart(ctx,{})
                 * 参数1:画布对象
                 * 参数2:数据和配置信息
                 * */

                var data = {
                    //对应每一个分类的内容
                        labels: [
                            "black",
                            "Blue",
                            "Yellow"
                                ],
                        //表单的数据信息
                        datasets: [
                            {   //所占的大小
                                data: [300, 50, 100],
                                backgroundColor: [
                                    "#FF6384",
                                    "#36A2EB",
                                    "#FFCE56"
                                    ],
                                hoverBackgroundColor: [
                                    "#FF6384",
                                    "#36A2EB",
                                    "#FFCE56"
                                ]
                            }]
                    };

            var myPieChart = new Chart(painter,{
                    type: 'pie',
                    data: data,
//                  options: options
                });

        </script>   

图片 13

圆饼图

var context = drawing.getContext(“2d’)

开始路径:context.beginPath();
闭合路径(不必对称出现):context.closePath();

}

  1. 状态:

</script>

2.2D上下文

保存状态值:context.save();
返回原始状态值:context.restore();

填充fillStyle和描边strokeStyle

  1. 直线Line:

if(drawing.getContext){

var context = drawing.getContext(‘2d’);

线色:context.strokeStyle = "#fd3/agba(0,255,255,0.5)";   
线宽:context.lineWidth = 3;
线接口:context.lineJoin = "miter/bevel/round"; context.lineCap = "round";
线接口=“miter”: context.miterLimit = 20;
移动落脚点:context.moveTo(x,y);
绘制路径:context.lineTo(x,y);
画线:context.stroke();

context.strokeStyle = “red”;

  1. 弧线Arc:

context.fillStyle = “#0000ff”

}

圆弧:context.arc(centerx,centery,radius,startAngle,endAngle,anticlockwise=false)  //指定圆心
弧线:context.arcTo(x1,y1,x2,y2,radius)   //指定控制点和结束点
贝塞尔二次曲线:contect.quadraticCurveTo(x1,y1,x2,y2)   //指定控制点和结束点
贝塞尔三次曲线:contect.bezierCurveTo(x1,y1,x2,y2,x3,y3)   //指定两个控制点和结束点

3.制图矩形

  1. 填充Fill:

与矩形相关的方法:fillRect(),strokeRect(),clearRect()

矩形,描边同理

填充色:context.fillStyle = "#000";
填充长方形(直接画出来):context.fillRect(0,0,canvas.width,canvas.height);
填充:context.fill();
线性渐变: var grd = context.createLinearGradient(xstart,ystart,xend,yend);
grd.addColorStop(stop,color);
径向渐变: var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
图片: var backgroundImg = new Image();
backgroundImg.src = "";
backgroundImg.onload = function(){
var pattern = context.createPattern(img, repeat-style); //no-repeat/repeat-x/repeat-y/repeat
}

if(drawing.getContext){

  1. 变换:

var context = drawing.getContext(‘2d’);

context.fillStyle=”red”;

位移:context.translate(x,y);
缩放:context.scale(x,y)   //(x缩放,y缩放)
变换矩阵:context.transform(1,0,0,1,x,y);   //(x缩放,y缩放)
旋转(弧度):context.rotate(rot/180*Math.PI); 

context.fillRect(10,10,50,50);

  1. 文字渲染:

context.fillStyle=”#ff0000″;

context.fillRect(30,30,50,50);

字体字号:context.font = "20px sans-serif"  
font-style:normal/italic(斜体)/oblique(倾斜)
font-variant:normal/small-caps (英文小写变小型大写)
font-weight:normal400/lighter/bold700/bolder
font-size: 20px/2em/150%/xx-small/x-small/medium/large/x-large/xx-large
font-family: 多种字体备选、支持@font-face、web安全字体
打印文字:context.fillText("xxxxx",x,y)
文本水平对齐:context.textAlign = "left/center/right"
文本垂直对齐:context.textBaseline = "alphabetic(字母)/ideographic(方块字)/hanging(印度文)/top/middle/bottom"
文本度量:context.measureText(string).width

//在八个矩形重叠的地点清楚三个小矩形

  1. 黑影与透明:

context.clearRect(40,40,10,10)

}

阴影色:context.shadowColor = “grey”
位移值:context.shadowOffsetX = 20
context.shadowOffsetY
模糊度:context.shadowBlur  //0不模糊,数字越大越模糊
透明度:context.globalAlpha = 0.5
遮盖效果:context.globalCompositeOperation = "source-over/source-atop/source-in/source-our/destination-over/lighter(颜色叠加)/copy/xor(重叠挖空)"

4.制图路线

  1. 剪切:
    context.clip()

  2. 路径方向:
    非零环绕原则
    先是,大家得给图形显明一条渠道,只要“一笔画”并且“不走重复路径”就可以了。如图,标出的是内部的黄金年代种路子方向。大家先假定路线的方框向为1(其实为-1吗的也都能够,正负方向互为相反数,不是0就可以卡塔尔,那么反方向正是其相反数-1。
    S3中引出的射线L3,与两条子路线相交,不过里面有一条的反方向,流速計+1-1,结果为0,在里边。没错,只要结果不为0,该射线所在的区域就在外场。

待续。。。。

相关文章