码迷,mamicode.com
首页 > 其他好文 > 详细

canvas常用属性方法由浅上浮

时间:2018-08-18 00:46:49      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:画圆   repeat   repeat-y   定义   介绍   dia   恢复   详细   close   

首先引入<canvas></canvas>标签就不必说了。

其次就是得到canvas的2d环境了( var ctx = canvasDom.getContent(‘2d‘) )。

现在呢,你可能想画点什么东西。画东西之前你要确定好一些东西,比如:

  ctx.fillStyle  这是一个用来确定填充颜色的属性。(带fill都和填充有关)

  ctx.strokeStyle  这是一个用来确定"笔路径"(就像是线条)的属性。(带stroke都和描线有关)

  ctx.shadow++  这是有4个设置所画图形阴影的属性(shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY),我不常用,略。

  ctx.lineWidth  这是4个设置线条样式的属性(lineCap,lineJoin,lineWidth,miterLimit)中最常用的,设置线宽,值为带px的string。

  ctx.font  这是设置文本()的字体大小和字体样式,值可以是"30px",也可以是"30px  Microsoft yahei"。同时配合ctx.textAlign和ctx.baseline设置对齐位置和基线位置(什么是基线?百度吧)。

了解了上面这些基础属性后,你就可以画点什么了:

  想要显示点什么东西,流程大概是先弄路径(路径是看不见的),然后再通过ctx.fill()或ctx.stroke来对路径进行填充描线

  你可以用ctx.rect(x,y,width,height)或ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise)先弄一个路径,然后在fill或者stroke。

  当然矩形有ctx.fillRect()和ctx.strokeRect()直接弄一个可见的方形。(圆没有这两个方法)

  最后再介绍一个黑板擦--ctx.clearRect(x,y,weight,height),用来清除该方框内的所有像素。

  还有一个为了防止之前的路径干扰,可以在每次画之前都ctx.beginPath()来清掉之前的路径。

以上就是基本的canvas的使用,下面就来聊点高(yong)级(bu)点(shang)的。

  矩形样式的渐变填充:

    var grd = ctx.createLinearGradient(x0,y0,x1,y1);

    grd.addColorStop(0,"black");

    grd.addColorStop(1,"white");

    ctx.fillstyle = grd;

    ctx.fillRect(x,y,w,h);

    这一趟下来相当于是先预定义了一个渐变样式(可填充或者描线),将样式设置好后进行填充或者描线。

    还有createRadialGradient()配合addColorStop设置放射状的样式。

  媒体(图片、视频、其他canvas)的填充:

    var img = imgDom;

    var pat = ctx.createPattern(img,"repeat");

    然后这个pat就可以给ctx.++Style,从而进行填充或者描线等。

    其中pattern有四种:repeat(默认),repeat-x,repeat-y,no-repeat。

  自定义路径:

    利用ctx.moveTo(x,y);把路径起点移动到(x,y) ,然后配合lineTo(x,y),就可以得到路径,就可以描线显示出来。

    当然如果你想填充,但是可能路径没有闭合,可以利用ctx.closePath()闭合路径,然后进行填充。

  画布切割:

    使用ctx.clip()可以根据当前已闭合的路径来剪切画布,被剪切的画布部分就不能被操作了。

    可以通过ctx.save()对当前区域先进行保存,然后通过ctx.restore()进行恢复。

  画圆弧:

    画圆弧通过ctx.arcTo(x0,y0,x1,y1,radius);通过两点和半径确定弧线,来得到路径,然后根据需要填充或者描线。

  判断点是否在路径内:

    ctx.isPointInPath();返回布尔值,没啥好说的。

  累了,想看详细的去W3C吧!

 

 

canvas常用属性方法由浅上浮

标签:画圆   repeat   repeat-y   定义   介绍   dia   恢复   详细   close   

原文地址:https://www.cnblogs.com/wumon/p/9495630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!