canvas基础知识
canvas基础知识
## CanvasDOM对象
#### 获取绘图环境
```
canvas.getContext();
```
#### 设置宽和高
```
canvas.width = 500;
canvas.height = 500;
```
## Context绘图对象
#### 设置路径的起点
```
context.moveTo(x, y);
```
#### 画路径点
```
context.lineTo(x, y);
```
#### 根据当前路径进行描边
```
context.stroke();
```
#### 根据当前路径进行填充
```
context.fill();
```
#### 清除路径
```
context.beginPath();
```
#### 闭合路径
> 从当前路径的结束点到起始点连一条路径
```
context.closePath();
```
#### 清除画布
```
context.clearRect(x, y, w, h);
```
#### 画矩形路径
```
context.rect(x, y, w, h);
```
#### 画描边矩形
> 该方法不会产生任何路径
```
context.strokeRect(x, y, w, h);
```
#### 画填充矩形
> 该方法不会产生任何路径
```
context.fillRect(x, y, w, h);
```
#### 设置线条虚实样式
```
context.setLineDash([5, 3...]);
```
#### 获取线条虚实样式
```
context.getLineDash();
```
## Context属性
#### 描边色
```
context.strokeStyle = 颜色值;
```
#### 填充色
```
context.fillStyle = 颜色值;
```
#### 线宽
```
context.lineWidth = 10;
```
#### 线帽
> 默认值为butt。
```
context.lineCap = 'butt' || 'round' || 'square';
```
#### 线交点
> 默认值为miter。
```
context.lineJoin = 'miter' || 'round' || 'bevel';
```
#### 虚线偏移量
```
context.lineDashOffset = 5;
```
<!DOCTYPE html> /* /* /* /* /* * */ </script> |
画弧形
画扇形
画饼图
<!DOCTYPE html> // 把角度转换为弧度 // 混入式继承 /* this.x = x; // 一组颜色 // 给原型扩充方法 // 绘制饼图 // 在外面保存一下this // 数据的总和 // 一个数据值所占用的角度 // 假设一开始就绘制了一个起始为0,结束为0的扇形 // 画扇形 // 每次进来,计算当前扇形的起始角度和结束角度 // 下一个扇形的起始角度,是当前扇形的结束角度 // 第一个扇形 // 把构造函数暴露到全局 }( window )); var cvs = document.getElementById('cvs'); var pipe = new Pipe( 200, 200, 80, [ 10, 30, 50, 60, 20 ] ); |
canvas基础知识的更多相关文章
- canvas API ,通俗的canvas基础知识(四)
今天要讲的内容是canvas的转换功能,前面的内容没用看的同学可以出门右转,先看看前面的基础知识,废话不多说,开始进入正题吧! 何为转换功能?熟悉css3的同学都知道,css3里面有transform ...
- canvas 基础知识整理(二)
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理(一)
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- 第157天:canvas基础知识详解
目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...
- canvas API ,通俗的canvas基础知识(六)
这篇是canvas API系列的首尾之作,这篇以后,所有的canvas的属性和方法就将完了,哦,不对,应该是大部分常用的,还有部分不常用的属性和方法,因为种种原因,就不介绍了,后期的重点就是多写一点c ...
- canvas API ,通俗的canvas基础知识(五)
前几期讲的都是路径图形的绘图,这节我们要讲的是如何在画布上操作图片,因为图形画不了漂亮妹子(画图高手忽略不计),想画美女怎么办?跟我来: 想要在画布中插入一张图片,我们需要的方法是这位大侠: draw ...
- canvas API ,通俗的canvas基础知识(三)
全文说到了三角形,圆形等相关图形的画法,不熟悉的同学可以出门右转,先看看前文,接下来继续我们的图形——曲线. 学过数学,或者是比较了解js 的同学都知道贝塞尔曲线,当然,在数学里面,这是一门高深的学问 ...
随机推荐
- Spring 静态代理和动态代理
现在我们来模拟一下,某位学生去考试. 假设他(小明)正常的考试. 运行结果: 结果: 突然某一天,他睡过头了,来不急去考试,所有他打算叫另一个人(Cheater)去代替他考试. 运行结果 ...
- layui的数据表格加上操作
数据表格加上操作. <script type="text/html" id="barDemo"> <a class="layui-b ...
- protoc 编译工具
在进行开发 protoc 之前,你需要首先在你的计算机中安装 protoc 编译工具. 下载编译工具 进入 Protocol Buffers 的源代码中然后选择发布的版本中,找到对应的版本.项目的链接 ...
- (Java多线程系列三)线程间通讯
Java多线程间通讯 多线程之间通讯,其实就是多个线程在操作同一个资源,但是操作的动作不同. 1.使用wait()和notify()方法在线程中通讯 需求:第一个线程写入(input)用户,另一个线程 ...
- 为什么要使用 Go 语言,Go 语言的优势在哪里?
1.Go有什么优势 可直接编译成机器码,不依赖其他库,glibc的版本有一定要求,部署就是扔一个文件上去就完成了. 静态类型语言,但是有动态语言的感觉,静态类型的语言就是可以在编译的时候检查出来隐藏的 ...
- 关于JavaScript的内存机制
一.背景 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存 ...
- Java常考面试题整理(四)
有关所有Swing相关的面试题,都可以说是凑数的,感觉自己在敲这些的时候感觉一点用处都没有,可以从第72条开始看. 61.说出三种支持重绘(painting)的组件. 参考答案: Canvas,Fra ...
- 如何使用git工具
首先需要下载安坐git工具 地址如下:https://git-scm.com/downloads 安装完毕之后,就可以进入提供的命令行窗口 然后就可以使用了,比如:想从 github 克隆项目下来 g ...
- 191028DjangoORM之多表操作
一.多表操作之一对多 models.py from django.db import models class Book(models.Model): name = models.CharField( ...
- Entity Framework Code First使用者的福音 --- EF Power Tool使用记之一
下次会为大家深入解析这个小工具. 最先看到这个工具是在EF产品组最新的博客文章上,http://blogs.msdn.com/b/adonet/archive/2011/05/18/ef-power ...