Canvas的API整理
canvas元素 可被用来通过脚本(通常是JavaScript)绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内…容将会在在旧的、不支持canvas元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。
canvas 看起来和 img 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, canvas 标签只有两个属性 —— width 和 height 。这些都是可选的,并且同样利用…。这些都是可选的,并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用 CSS 来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸
以上是MDN中关于Canvas的一些简单介绍,我不知道Canvas有多少人接触过,我自己也接触没有多久,不做游戏和数据方面的话,用的真的不多,但是知道一些还是有必要的,下面是我自己整理的一些常用的API,其实在MDN上都有,只是比较凌乱,所以自己把这些整理在了一起,没接触过的可能看不太懂,这些都是Canvas的命令,但是有些会忘记,就整理了起来,如果需要,可以拿去,但是最好注明出处
- 标签
<canvas></canvas>
- 默认宽300,高150,不用用Css设置宽高
- 获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象,利用该方法绘图
- 基本绘图命令
- 设置开始绘图位置:ctx.moveTo(x,y);
- 设置直线到的位置:ctx.lineTo(x,y);
- 描边绘制:ctx.stroke();
- 填充绘制:ctx.fill();
- 自动闭合路径:ctx.closePath();
- 开启新的绘制:ctx.beginPath();
- 设置描边颜色:ctx.strokeStyle;
- 设置填充颜色:ctx.fillStyle;
- 保存开始设置:ctx.save();
- 重置到保存样式:ctx.restore();
- 线型相关属性
- 设置线宽:ctx.linewidth;(数字即可)
- 设置线末端类型:ctx.lineCap;('butt' 表示两端使用方形结束,'round' 表示两端使用圆角结束,'square' 表示突出的圆角结束)
- 设置相交线的拐点:ctx.lineJoin;('round' 使用圆角连接,'bevel' 使用平切连接,'miter' 使用直角转)
- 获得线段样式数组:ctx.getLineDash();
- 设置线段样式:ctx.setLineDash();(数组形式设置)
- 绘制线段偏移量:ctx.lineDashOffset;
- 矩形绘图命令
- 绘制矩形:ctx.rect;(因为还需要fill或者stroke才可以看见效果,所以直接使用下面两种)
- 绘制边框矩形:ctx.strokeRect(x,y,width,height);
- 绘制填充矩形:ctx.fillRect(x,y,width,height);
- 清除矩形区域:ctx.clearRect(x,y,width,height);
- 圆弧绘制命令
- 绘制圆弧:ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
- 绘制文本命令
- 绘制填充文字:ctx.fillText(text,x,y);
- 绘制空心文字:ctx.strokeText(text,x,y);
- 设置字体样式:ctx.font;
- 设置字体水平位置:ctx.textAlign;(start(默认), end, left, right, center)
- 设置字体垂直位置:ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
- 绘制图片命令
- 绘制图片(3参数):ctx.drawImage(img,casx,casy);
- 绘制图片(5参数):ctx.drawImage(img,casx,casy,width,height);
- 绘制图片(9参数):ctx.drawImage(img,x,y,width,height,casx,casy,caswidth,casheight);
- 变换命令
- 平移变换:ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
- 旋转变化:ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
- 缩放变化:ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)
Canvas的API整理的更多相关文章
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
- Canvas原生API(纯CPU)计算并渲染三维图
Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...
- Html5 学习系列(五)Canvas绘图API快速入门(2)
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- 引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Canvas createRadialGradient API
Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...
- Elasticsearch Java Rest Client API 整理总结 (二) —— SearchAPI
目录 引言 Search APIs Search API Search Request 可选参数 使用 SearchSourceBuilder 构建查询条件 指定排序 高亮请求 聚合请求 建议请求 R ...
随机推荐
- php页面如何增加下载软件功能
php <?php $array = parse_ini_file("sample.ini"); ?> <a id="btnDownloadFull&q ...
- 关于Entity Framework使用的简单例子
一.创建Code First模型 1.创建工程,这里我使用的是以.NET 4.0为目标的实体Web应用程序 2.安装Entity Framework 确保已安装NuGet,选择NuGet套件管理员&g ...
- nvm诡异的报错
安装:curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash wget -qO- htt ...
- 网站性能,javascript性能相关知识点
一.高性能网站 <高性能网站建设指南>一书中提出用户只有10%-20%最终用户响应时间是花在从web服务器获取html文档并传送到浏览器中,80%的时间都花在了等待页面组件中,由此提出了构 ...
- RDIFramework.NET -.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(WebForm版)
RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(WebForm版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之 ...
- ubuntu16.04部署RED5流媒体服务器
前提:jdk已经安装 1,下载RED5(https://github.com/Red5/red5-server/releases)选择red5-server-X.X.X-MXX.tar.gz 2,解压 ...
- MVC中的一般权限管理
权限管理,一般指根据系统设置的安全规则或者安全策略,用户可以访问而且只能访问自己被授权的资源,不多不少.权限管理几乎出现在任何系统里面,只要有用户和密码的系统.权限管理还是比较复杂的,有的固定到某个模 ...
- grunt 入门学习
前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt , javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...
- Buge's Fibonacci Number Problem
Buge's Fibonacci Number Problem Description snowingsea is having Buge’s discrete mathematics lesson, ...
- IP地址数据库-ISP运营商列表(2017年1月)
IP地址数据库 微信号:qqzeng-ip [全球旗舰版][国内精华版][国外拓展版][英文版][掩码版] http://qqzeng.com 中国大陆:三大基础运营商 中国电信中国联通中国 ...