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. 设计模式的uml图的关键(核心)

    每个设计模式的关键的部位就是,其变化点.用抽象来封装变化点 如下图的代理模式 关键点就是框图内的subject定义了 实际对象 和代理对象都具有的接口.才形成代理模式

  2. java数组的定义

    class ArrayDome { public static void main(String[] args) { //元素类型[] 数组名 创建一个 元素类型[元素个数或数组长度] /* 需要一个 ...

  3. 【leetcode】485. Max Consecutive Ones

    problem 485. Max Consecutive Ones solution1: class Solution { public: int findMaxConsecutiveOnes(vec ...

  4. oo第四次博客

    一.测试与正确性论证比较 正确性论证是论证程序达到预期目的的一般性陈述,而该论证与程序输入数据的特定值无关,能够代表穷举性测试. 程序测试是指测试者特意跳出一批输入数据,通过运行程序,检查每个输入数据 ...

  5. 【EMV L2】Cardholder Verification Rule(CVR) Format

    Cardholder Verification Rule(CVR)由两个字节组成: 高字节为Cardholder Verification Method (CVM) Codes,表示执行Cardhol ...

  6. 蓝桥杯——X星球居民问题

    [问题描述] X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1  2  ...

  7. Navicat 连接MySQL时出现1251错误的解决方案

    我用的MySQL版本是8.0.11,比较新的MySQL版本中采用的加密方式与旧的不同,从而导致1251错误. 解决方案:打开终端连接上数据库,执行以下语句,问题解决.(自己遇到过的坑,亲测有效) US ...

  8. ORACLE数据库_迁移(新机器,新存储)

    迁移: (10g 64老机器,老存储) ------>(11g 64新机器,新存储)注意要点:新老服务的时间,字符集,sid升级顺序:10.2.0.1------>10.2.0.4或10. ...

  9. Ubuntu使用总结一

    一.安装 Ubuntu桌面版与服务器版的不同之处桌面版面向个人电脑使用者,可以进行文字处理.网页浏览.多媒体播放和玩游戏.本质上说,这是一 个为普通用户所定制的多用途操作系统.另一方面,服务器版旨在充 ...

  10. windows与linux中的mysql配置主从

    最近在给学生讲解数据库的主从配置,由于学生电脑里面装的虚拟机是linux的,但是本机的系统是windows的,所以需要用windows中的mysql与linux中的mysql进行主从配置.下面说一下主 ...