lineTo(x,y) 定义线条结束坐标

moveTo(x,y) 定义线条开始坐标

ctx.stroke();绘制空心图形

ctx.fill();填充图形 把当前路径环绕起来的区域进行填充

ctx.fillStyle 填充颜色

ctx.strokeStyle 绘制图形颜色

ctx.closePath();//让图形闭合,防止锯齿

ctx.beginPath();// // 一个画布内画多个图形,放了防止重绘之前的路径,所以先把之前的路径清除掉

非零环绕原则:

a 是用来判断哪些区域属于路径内( 计算结果非0,即为路径内 )。

b 在路径包围的区域中,随便找一点,向外发射一条射线,
c 和所有围绕它的边相交,
d 然后开启一个计数器,从0计数,
e 如果这个射线遇到顺时针围绕,那么+1,
f 如果遇到逆时针围绕,那么-1,
g 如果最终值非0,则这块区域在路径内。
备注:基数边的区域一定在路径内。

先填充与先描边

描边的时候会占用原图形的一部分(线宽的一半)

为了让线宽符合要求,最好先填充再描边,防止填充时覆盖掉线宽的一半

ctx.fill();   ctx.stroke();

canvas在绘制线条的时候,会向左或向右偏移线宽的一半,然后进行绘制

如果线宽为奇数,边缘颜色会变浅

设置线帽样式:

ctx.lineCap='butt'、'round'、'square'

butt是默认值

round线头是圆的

square线头两段各增加线宽的一半

设置交点样式

ctx.lineJoin = ‘miter' 、'round'、'bevel'

miter是默认值,两边向外延伸相交为尖尖角,
round是圆头,
bevel两边相连为一个斜面。

内置矩形的API

ctx.rect(起点x,起点y,宽,高)

绘制一个描边矩形

ctx.strokeRect(起点x,起点y,宽,高);

绘制一个填充矩形

ctx.fillRect(起点x,起点y,宽,高);

按照矩形的大小清除画布中指定位置的内容

ctx.clearRect(起点x,起点y,宽,高);

绘制虚线

ctx.setLineDash([5,3]);设置画线的时候空白部分和实现部分的大小 5像素实线,3像素空白

画弧( 画的是路径 )

ctx.arc( 圆心x轴坐标,圆心y轴坐标,半径, 起点弧度,结束点弧度,是否逆时针画(可选) )

设置文字的属性
 ctx.font = 和css语法一样。
 注意:这里设置字体大小时必须带单位,单位支持css的所有表示方式。
注意:单独设置字体大小不会生效,必须要加一个额外属性样式。
  ctx.font = '2rem 微软雅黑';

绘制描边文字:
 ctx.strokeText( 文字, 参考x轴坐标,参考y轴坐标,限制文字的最大长度(可选) )

ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );

绘制填充文字:
ctx.fillText( 文字, 参考x轴坐标,参考y轴坐标,限制文字的最大长度(可选) )

ctx.fillText( '咯咯咯咯咯咯', 100, 200 );

设置文字的水平对其方式:
ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
默认值为start。

设置文字的垂直对其方式:
ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
默认值为alphabetic。

状态保存:

ctx.save();

 把当前的状态(绘制环境的所有属性)copy一份进行保存。

状态回滚:
ctx.restore();
把最近保存的一次状态作为当前状态。

ctx.drawImage()
绘制图像,有三种使用方式。 第一种,三参数版本:
把图像绘制到指定的坐标。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10 );
} 第二种,五参数版本:
把图像绘制到指定的坐标,并指定其大小。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10, 200, 200 );
}
第三种,九参数版本:
把裁剪到的部分图像绘制到指定的坐标,并指定其大小。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img,
0, 0, 400, 400,
100, 100, 400, 400 );
}
ctx.isPointInPath()判断点是否在路径内(路径必须绘制出来才可以
比如this.ctx.rect();然后必须this.ctx.stroke()才可以

requestAnimationFrame

请求动画帧函数,这个函数和setTimeout方法使用类似,
 他都是定时器,却别在于setTimeout可以自由指定回调的触发时间,
 而requestAnimationFrame函数回调的触发是由浏览器来控制的。
 requestAnimationFrame( callback )
 备注:当浏览器重绘页面的时候,就会调用这个callback,
 这样callbackg的执行就会比较稳定,适合用来做流畅的动画。

用法:

(function con() {
console.log(111);
requestAnimationFrame( con );
}());

 

canvas一些属性的更多相关文章

  1. C# Wpf 后台代码设定UIElement的Canvas位置属性值

    后台in-code设定元件UIElement的Canvas位置属性的两种方法: 1.UIElement.SetValue()方法 uiElement.SetValue(Canvas.TopProper ...

  2. canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题

    今天用canvas做了一个页面特效,呼呼,在做的过程中发现createRadialGradient 和 globalAlpha这2个属性一起使用导入不能实现透明度问题,首先把createRadialG ...

  3. [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  4. canvas新属性

    lineCap默认值是butt,还有aquare,round 使用:context.lineCap="butt" lineJoin miter是默认 还可以是round,bevel ...

  5. HTML5 canvas 合成属性

    合成属性 globalAlpha                                设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation       ...

  6. HTML5 canvas文本属性与方法

    文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

  7. HTML 5 canvas globalCompositeOperation 属性

    做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...

  8. canvas常用属性方法由浅下沉

    首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...

  9. [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

随机推荐

  1. 剑指Offer 65. 矩阵中的路径 (回溯)

    题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵中 ...

  2. [配置] win下maven配置

    下载解压 打开环境变量 新建MAVEN_HOME 路径为maven根文件夹 PATH 末尾添加 %MAVEN_HOME%\bin; 命令行 mvn -v 检查 添加网易maven镜像库 阿里的也可以 ...

  3. vsCode打开多个终端

    可以在vsCode里面启动两个终端 ,点击+号就可以添加一个终端. 避免项目启动的多了需要开好几个编辑器,造成代码混淆.

  4. Codeforces1097D. Makoto and a Blackboard(数论+dp+概率期望)

    题目链接:传送门 题目大意: 给出一个整数n写在黑板上,每次操作会将黑板上的数(初始值为n)等概率随机替换成它的因子. 问k次操作之后,留在黑板上的数的期望. 要求结果对109+7取模,若结果不是整数 ...

  5. 搭建Jmeter + Grafana + InfluxDB性能测试监控环境

    背景 Jmeter原生的实时监控每半分钟收集一次数据,只能在Linux控制台查看日志输出,界面看起来不直观,图表报告只能等压测结束后才能生成.如下图为jmeter在Linux下运行的实时日志: 那么如 ...

  6. C语言中的一维数组

    一.一维数组的定义和引用 (1)一维数组的定义 类型说明符表示数组中的元素类型 数组标识符该数组型变量的名称,命名规则与变量名一致 常量表达式定义了数组中存放的数据元素的个数. (2)一维数组的引用 ...

  7. 【Spring框架】<mvc:default-servlet-handler/>的作用

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  8. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  9. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  10. win10 uwp 读取resw资源文件

    ResourceContext resourceContext = ResourceContext.GetForViewIndependentUse(); ResourceMap resourceMa ...