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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
　　*{
　　　　margin:0 ;
　　　　padding:0;
　　}
　　canvas{
　　　　border: 1px solid #f00;
　　　　width: 500px;
　　　　height: 500px;
　　}
</style>
</head>
<body>
　　<canvas id = "cvs"></canvas>
　　<script type="text/javascript">
　　var cvs = document.getElementById("cvs");
　　var ctx = cvs.getContext("2d");
　　//清除之前路径，开启新路径
　　ctx.beginPath();
　　ctx.moveTo( 110, 10 );
　　ctx.lineTo( 160, 60 );
　　ctx.lineTo( 60, 60 );
　　ctx.lineTo( 110, 10 );
　　//消除锯齿
　　ctx.lineTo( 160, 60 );
　　//设置线条颜色，颜色设置，必须放在绘制之前
　　ctx.strokeStyle = "blue";
　　//设置线宽，线宽设置，必须放在绘制之前
　　ctx.lineWidth = 6;
　　// 有了closePath，绘图直线图形时，最后一条边就可以省去了
　　ctx.closePath();
　　//设置填充颜色
　　ctx.fillStyle = "red";
　　//开始填充
　　ctx.fill();
　　//开始描边
　　ctx.stroke();

/*
* 非零环绕原则：
* 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
* 在路径包围的区域中，随便找一点，向外发射一条射线，
* 和所有围绕它的边相交，
* 然后开启一个计数器，从0计数，
* 如果这个射线遇到顺时针围绕，那么+1，
* 如果遇到逆时针围绕，那么-1，
* 如果最终值非0，则这块区域在路径内。
*
* 备注：基数边的区域一定在路径内。
*/

/*
* 描边的时候，会占用原图形的一部分( 线宽的一半 )。
* 所以，日常开发中，为了让线宽符合要求，
* 最好先填充，再描边，防止填充时覆盖掉线宽的一半。
*/

/*
* canvas在绘制线条的时候，会向左向右偏移线宽的一半，然后进行绘制。
* 如果线宽为奇数，那么边缘的颜色值，会缩减一半。
* */

/*
* 设置线帽样式：
* ctx.lineCap = ‘butt' 、'round'、'square'
* butt是默认值，
* round线头是圆的，
* square线头两段各增加线宽的一半。
* */

/*
* 设置线交点样式：
* ctx.lineJoin = ‘miter' 、'round'、'bevel'
* miter是默认值，两边向外延伸相交为尖尖角，
* round是圆头，
* bevel两边相连为一个斜面。

* */

　　</script>
</body>
</html>

画弧形

画扇形

画饼图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<script>
(function( w ) {

// 把角度转换为弧度
function angleToRadian( angle ) {
return Math.PI / 180 * angle;
}

// 混入式继承
function extend( o1, o2 ) {
for ( var key in o2 ) {
// 只有o2自己的属性才会copy到o1身上
if ( o2.hasOwnProperty( key ) ) {
o1[ key ] = o2[ key ];
}
}
}

/*
* constrcutor { Pipe } 饼图构造函数
* param { x: number } 圆心x轴坐标
* param { y: number } 圆心y轴坐标
* param { r: number } 圆半径
* param { data: Array } 绘制饼图所需的数据
* */
function Pipe( x, y, r, data ) {

this.x = x;
this.y = y;
this.r = r;
this.data = data;

// 一组颜色
this.colors = [ 'orange', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'peru', 'pink' ];
}

// 给原型扩充方法
extend( Pipe.prototype, {

// 绘制饼图
draw: function() {

// 在外面保存一下this
var self = this;

// 数据的总和
var num = 0;
this.data.forEach( function( val ) {
num += val;
});

// 一个数据值所占用的角度
var baseAngle = 360 / num;

// 假设一开始就绘制了一个起始为0，结束为0的扇形
var startAngle = 0,
endAngle = 0;

// 画扇形
this.data.forEach( function( val, i ) {

// 每次进来，计算当前扇形的起始角度和结束角度

// 下一个扇形的起始角度，是当前扇形的结束角度
startAngle = endAngle;
// 这个结束角度 = 上一个扇形的结束角度 + 当前数值所对应的角度
endAngle = endAngle + baseAngle * val

// 第一个扇形
ctx.beginPath();
ctx.moveTo( self.x, self.y );
ctx.arc( self.x, self.y, self.r, angleToRadian( startAngle ), angleToRadian( endAngle ) );
ctx.closePath();
ctx.fillStyle = self.colors[ i ];
ctx.fill();
});
}
} );

// 把构造函数暴露到全局
w.Pipe = Pipe;

}( window ));

var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');

var pipe = new Pipe( 200, 200, 80, [ 10, 30, 50, 60, 20 ] );
pipe.draw();
</script>
</body>
</html>

canvas基础知识的更多相关文章

  1. canvas API ，通俗的canvas基础知识（四）

    今天要讲的内容是canvas的转换功能,前面的内容没用看的同学可以出门右转,先看看前面的基础知识,废话不多说,开始进入正题吧! 何为转换功能?熟悉css3的同学都知道,css3里面有transform ...

  2. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  3. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  4. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  5. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  6. 第157天：canvas基础知识详解

    目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...

  7. canvas API ，通俗的canvas基础知识（六）

    这篇是canvas API系列的首尾之作,这篇以后,所有的canvas的属性和方法就将完了,哦,不对,应该是大部分常用的,还有部分不常用的属性和方法,因为种种原因,就不介绍了,后期的重点就是多写一点c ...

  8. canvas API ，通俗的canvas基础知识（五）

    前几期讲的都是路径图形的绘图,这节我们要讲的是如何在画布上操作图片,因为图形画不了漂亮妹子(画图高手忽略不计),想画美女怎么办?跟我来: 想要在画布中插入一张图片,我们需要的方法是这位大侠: draw ...

  9. canvas API ，通俗的canvas基础知识（三）

    全文说到了三角形,圆形等相关图形的画法,不熟悉的同学可以出门右转,先看看前文,接下来继续我们的图形——曲线. 学过数学,或者是比较了解js 的同学都知道贝塞尔曲线,当然,在数学里面,这是一门高深的学问 ...

随机推荐

  1. HDU - 6704 K-th occurrence (后缀数组+主席树/后缀自动机+线段树合并+倍增)

    题意:给你一个长度为n的字符串和m组询问,每组询问给出l,r,k,求s[l,r]的第k次出现的左端点. 解法一: 求出后缀数组,按照排名建主席树,对于每组询问二分或倍增找出主席树上所对应的的左右端点, ...

  2. 【BZOJ1016】【Luogu P4208】 [JSOI2008]最小生成树计数 最小生成树，矩阵树定理

    蛮不错的一道题,遗憾就遗憾在数据范围会导致暴力轻松跑过. 最小生成树的两个性质: 不同的最小生成树,相同权值使用的边数一定相同. 不同的最小生成树,将其都去掉同一个权值的所有边,其连通性一致. 这样我 ...

  3. 原型模式故事链(5)--JS变量作用域、作用域链、闭包

    上一章 JS执行上下文.变量提升.函数声明 传送门:https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域:顾名思义:变量起作用的范围.变量分为全 ...

  4. hibernate中Session的load和get方法的区别是什么？

    主要有以下三项区别:  ① 如果没有找到符合条件的记录,get方法返回null,load方法抛出异常.  ② get方法直接返回实体类对象,load方法返回实体类对象的代理.  ③ 在Hibernat ...

  5. vue自定义指令,自动调用下载的方法

    directives: { clickDown: { inserted (el, binding, item) { if (+binding.value.item.fromId === +item.c ...

  6. Linux 系统中 grep 的ABC参数含义

    1.grep  -A  5   匹配行及后5行 2.grep  -B  5   匹配行及前5行 3.grep  -C  5   匹配行及前后各5行

  7. python from…import* 语句

    把一个模块的所有内容全都导入到当前的命名空间也是可行的,只需使用如下声明: from modname import * 这提供了一个简单的方法来导入一个模块中的所有项目.然而这种声明不该被过多地使用. ...

  8. 字符串之format整理

    format 用法 本文根据官方文档及自己理解整理,只整理出自己可以理解的部分,h因个人水平有限,难免有所错误和纰漏,欢迎批评指正. 格式{ [field_name] ["!" c ...

  9. 「SDOI2017」硬币游戏

    题目链接 问题分析 首先一个显然的做法就是建出AC自动机,然后高斯消元.但是这样的复杂度是\(O(n^3m^3)\)的. 我们发现其实只需要求AC自动机上\(n\)个状态的概率,而其余的概率是没有用的 ...

  10. HDU 2829 [Lawrence] DP斜率优化

    解题思路 首先肯定是考虑如何快速求出一段铁路的价值. \[ \sum_{i=1}^k \sum_{j=1, j\neq i}^kA[i]A[j]=(\sum_{i=1}^kA[i])^2-\sum_{ ...