canvas一些属性
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一些属性的更多相关文章
- C# Wpf 后台代码设定UIElement的Canvas位置属性值
后台in-code设定元件UIElement的Canvas位置属性的两种方法: 1.UIElement.SetValue()方法 uiElement.SetValue(Canvas.TopProper ...
- canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题
今天用canvas做了一个页面特效,呼呼,在做的过程中发现createRadialGradient 和 globalAlpha这2个属性一起使用导入不能实现透明度问题,首先把createRadialG ...
- [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- canvas新属性
lineCap默认值是butt,还有aquare,round 使用:context.lineCap="butt" lineJoin miter是默认 还可以是round,bevel ...
- HTML5 canvas 合成属性
合成属性 globalAlpha 设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation ...
- HTML5 canvas文本属性与方法
文本属性和方法 font 设置或返回文本内容的当前字体属性 textAlign 设置或返回文本内容的当前对齐方式 start ...
- HTML 5 canvas globalCompositeOperation 属性
做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...
- canvas常用属性方法由浅下沉
首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...
- [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
随机推荐
- leetcode 买卖股票问题
leetcode121 Best Time to Buy and Sell Stock 说白了找到最大的两组数之差即可 class Solution { public: int maxProfit(v ...
- SQL Server tempdb 数据库位置迁移
SQL Server tempdb 数据库位置迁移 --查看物理位置 SELECT name, physical_name FROM sys.master_files WHERE database_i ...
- yarn安装
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载.React Native的命令行工具用于执行创建.初始化.更新项目.运行打包服务(packager)等任务. 先安装nod ...
- 2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践 (1)例举你能想到的一个后门进入到你系统中的可能方式? 在使用盗版软件,盗版系统,甚至游戏外挂时,往往会让我们关闭杀毒 ...
- flutter 添加插件
打開pubspec.yaml ---> cupertino_icons 下添加插件
- UCloud数据盘扩容步骤
1. 扩容目的 由于服务器数据盘存储空间不足导致系统无法正常的.为了彻底解决此问题,我们需要对服务器数据盘进行扩容. 2. 扩容步骤 2.1. 关机(如下图) 2.2. 创建快照(如下图) 2 ...
- hello.java分析
如下图源码所示: 该段代码声明了一个entity实体类,该类有一个变量name,对该变量写了对应的get和set方法.类中还有一个空的构造方法hello(). @RequestScoped用于指定一个 ...
- 第二次Scrum冲刺——Life in CCSU
第二次Scrum冲刺——Life in CCSU 一. 第二次Scrum任务 继续上一次冲刺的内容,这次完成论坛部分. 二. 用户故事 用户输入账号.密码: 用户点击论坛部分: 系统显示帖子: 用户选 ...
- 解题报告 『宝藏(Prim思想 + 访问顺序随机)』
原题地址 本以为不过是一道Prim算法模版题,但貌似只能得45分,虽然对我这种蒟蒻来说已经够了. 然而同机房大佬表示可以用模拟退火A了此题,遂习之,终无所获. 然而机缘巧合之下习得了另一种随机算法,于 ...
- redhat6.5 redis单节点多实例3A集群搭建
在进行搭建redis3M 集群之前,首先要明白如何在单节点上完成redis的搭建. 单节点单实例搭建可以参看这个网:https://www.cnblogs.com/butterflies/p/9628 ...