canvas基本
基本
- 支持ie 9+,firefox,opera,chrome,safari
html:
<canvas id="fir_canvas" width="400" height="400">
- Canvas API 使用了路径的表示法。但是,路径由一系列的方法调用来定义,比如调用 beginPath() 和 arc() 方法。一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用
方法
const canvas = document.getElementById('fir_canvas');
const ctx = canvas.getContent('2d');
- getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- dom
- clearRect(x,y,width,height) 清空给定矩形内的指定像素
绘制路径(线)和线形成的封闭图形
ctx.strokeStyle = “#0000ff”; // 线条的颜色
ctx.lineWidth = 8; // 线条的粗细
一条线
ctx.moveTo(100,100);
ctx.lineTo(500,500);
ctx.stroke(); // 绘制
一条拐弯的线(例子效果为一个折形)
ctx.moveTo(2, 2);
ctx.lineTo(16, 12);
ctx.lineTo(2, 24);
ctx.stroke();
效果:
例子二折形闭合成一个三角形
ctx.moveTo(20, 20);
ctx.lineTo(160, 120);
ctx.lineTo(20, 240);
ctx.lineTo(20, 20);
ctx.lineWidth = 8;
ctx.stroke();
路径回到起始点即可,但这样在设置线条粗细过粗的时候会有一些问题:
所以当绘制封闭图形时应该使用标准方法closePath(),见例五。
多条例子二
beginPath()
beginPath()方法,就会对之前绘制的路径进行清空,但不会回到(0,0)原点。
// 共用的样式写在beginPath()外面
ctx.beginPath();
ctx.moveTo(2, 2);
ctx.lineTo(16, 12);
ctx.lineTo(2, 24);
ctx.lineTo(2, 2);
ctx.stroke(); ctx.beginPath();
ctx.moveTo(32, 2);
ctx.lineTo(46, 12);
ctx.lineTo(32, 24);
ctx.lineTo(32, 2);
ctx.stroke(); ctx.beginPath();
ctx.moveTo(62, 2);
ctx.lineTo(76, 12);
ctx.lineTo(62, 24);
ctx.lineTo(62, 2);
ctx.strok 大专栏 canvas基本eStyle = "#0000ff";
ctx.stroke();
效果
封闭图形标准写法
ctx.beginPath();
ctx.moveTo(62, 2);
ctx.lineTo(76, 12);
ctx.lineTo(62, 24);// 省略了最后回到原点那句
ctx.closePath();
ctx.stroke();
用beginPath()第一句可以用moveTo()也可以用lineTo()
不用beginPath()得用moveTo();
画矩形 正方形 (因为必须有宽高)
strokeRect(x, y, width, height)
strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。
使用 strokeStyle 属性来设置笔触的颜色、渐变或模式
ctx.lineWidth = 8;
ctx.strokeStyle = "#333";
ctx.strokeRect(10,10,200,200);
效果
lineCap
属性 定义线段开头和结尾的形状butt(默认值),round,square
效果(从上到下依次为butt round square)
round只对线条的开头和结尾处有效果,对线段之间的连接处没有作用
lineJoin
属性miterLimit
属性 线条与线条之间的连接方式lineJoin: miter(默认值,尖角) bevel(衔接) round(圆角)
当lineJoin属性值是miter时,miterLimit起作用,默认值为10。
填充 fill()
fillStyle
| fillRect()
先填充,再画边框
ctx.beginPath();
ctx.lineTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.lineWidth = 8;
ctx.fillStyle = "#ddd";
ctx.fill();
ctx.stroke();
效果
fillRect(x,y,width,height)
绘制“已填色”的矩形(因为必须有宽高)。默认的填充颜色是黑色。
使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。如果不设置fillStyle则使用默认的黑色。
在例六的基础上
ctx.lineWidth = 8;
ctx.strokeStyle = "#333";
ctx.fillStyle = "antiquewhite";
ctx.fillRect(10,10,200,200);
ctx.strokeRect(10,10,200,200);
效果
最新文章
- 基于资源的权限系统-API设计
- 碰到一个在app内部浏览器锚点异常的问题
- java 验证电话号码(手机和固话)
- ActiveMQ集成到Spring
- MySQL Profile
- 05顺序队列_Queue--(栈与队列)
- SQL Server 优化器+SQL 基础
- 一个简单的servlet小程序
- 使用bootstrap建立响应式网页——头部导航栏
- 以kaggle-titanic数据为基础的完整的机器学习
- 关于:未能加载文件或程序集“ICSharpCode.SharpZipLib”或它的某一个依赖项异常的解决方案
- Django rest framework 源码分析 (1)----认证
- docker 7 docker的帮助命令
- Linux电源管理(7)_Wakeup events framework【转】
- Ubuntu 16.04安装Tomcat 8
- hdu 4339 Query(两种思路求解)
- MySQL SELECT 执行的具体步骤
- 大规模问题的分解法-D-W分解法
- 转载一篇必须超级好的JVM配置实战
- AJAX(Jquery)
热门文章
- 面向对象 part7 class
- iOS播放器、Flutter高仿书旗小说、卡片动画、二维码扫码、菜单弹窗效果等源码
- GCC的分支预测优化__builtin_expect
- 01 语言基础+高级:1-7 异常与多线程_day05 【异常、线程】
- ZZJ_淘淘商城项目:day03(淘淘商城02 - 后台系统功能实现)
- LeetCode No.151,152,153
- Matlab高级教程_第二篇:Matlab2016a和VS2013混合
- 分享几个4412开发板新录制的视频,不是VIP也能看
- 场景实践篇二:Nginx作为缓存
- shared zone ";SSL"; has no equal addresses: 011F0000 vs 03460000