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 ...
随机推荐
- 设计模式的uml图的关键(核心)
每个设计模式的关键的部位就是,其变化点.用抽象来封装变化点 如下图的代理模式 关键点就是框图内的subject定义了 实际对象 和代理对象都具有的接口.才形成代理模式
- java数组的定义
class ArrayDome { public static void main(String[] args) { //元素类型[] 数组名 创建一个 元素类型[元素个数或数组长度] /* 需要一个 ...
- 【leetcode】485. Max Consecutive Ones
problem 485. Max Consecutive Ones solution1: class Solution { public: int findMaxConsecutiveOnes(vec ...
- oo第四次博客
一.测试与正确性论证比较 正确性论证是论证程序达到预期目的的一般性陈述,而该论证与程序输入数据的特定值无关,能够代表穷举性测试. 程序测试是指测试者特意跳出一批输入数据,通过运行程序,检查每个输入数据 ...
- 【EMV L2】Cardholder Verification Rule(CVR) Format
Cardholder Verification Rule(CVR)由两个字节组成: 高字节为Cardholder Verification Method (CVM) Codes,表示执行Cardhol ...
- 蓝桥杯——X星球居民问题
[问题描述] X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 ...
- Navicat 连接MySQL时出现1251错误的解决方案
我用的MySQL版本是8.0.11,比较新的MySQL版本中采用的加密方式与旧的不同,从而导致1251错误. 解决方案:打开终端连接上数据库,执行以下语句,问题解决.(自己遇到过的坑,亲测有效) US ...
- ORACLE数据库_迁移(新机器,新存储)
迁移: (10g 64老机器,老存储) ------>(11g 64新机器,新存储)注意要点:新老服务的时间,字符集,sid升级顺序:10.2.0.1------>10.2.0.4或10. ...
- Ubuntu使用总结一
一.安装 Ubuntu桌面版与服务器版的不同之处桌面版面向个人电脑使用者,可以进行文字处理.网页浏览.多媒体播放和玩游戏.本质上说,这是一 个为普通用户所定制的多用途操作系统.另一方面,服务器版旨在充 ...
- windows与linux中的mysql配置主从
最近在给学生讲解数据库的主从配置,由于学生电脑里面装的虚拟机是linux的,但是本机的系统是windows的,所以需要用windows中的mysql与linux中的mysql进行主从配置.下面说一下主 ...