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 的同学都知道贝塞尔曲线,当然,在数学里面,这是一门高深的学问 ...
随机推荐
- GlusterFS ——分布式卷
GlusterFS概述 全部部署GlusterFS文件系统地址:https://www.cnblogs.com/Mercury-linux/p/12050389.html GlusterFS系统是一个 ...
- noi.ac NA536 【打地鼠】
又一道可写的小清新思维题 其实想到倒着做了,然而还是因为T1害人不浅(我太菜了),所以并没有写 考虑两个局面不同,显然至少打了一次地鼠,基于操作的颜色覆盖性质,我们可以考虑把操作倒着做,对于一个X点, ...
- 【leetcode】960. Delete Columns to Make Sorted III
题目如下: We are given an array A of N lowercase letter strings, all of the same length. Now, we may cho ...
- 18.configparser模块
# 创建配置文件 import configparser config = configparser.ConfigParser() # 相当于config = {} 空字典 config[" ...
- 2、DockPanel
DockPanel——停靠面板,内部控件或容器可以放置在上.下.左(默认).右.类似于Java AWT布局中的BorderLayout. 但与BorderLayout不同的是,每一个区域可以同时放置多 ...
- jquery password选择器 语法
jquery password选择器 语法 作用::password 选择器选取类型为 password 的 <input> 元素.大理石平台精度等级 语法:$(":passwo ...
- 运行时错误:“stack around the variable…was corrupted”
造冰箱的大熊猫@cnblogs 2018/11/1 引发问题的代码片段如下 WORD var; scanf ( "%d", &var ); 包含上述代码的程序,编译正常,运 ...
- Nowcoder 北师校赛 B 外挂使用拒绝 ( k次前缀和、矩阵快速幂打表找规律、组合数 )
题目链接 题意 : 中文题.点链接 分析 : 有道题是问你不断求前缀和后的结果 Click here 这道题问的是逆过程 分析方法雷同.可参考 Click here ----------------- ...
- Misplaced alignment tab character &
范例: 期望的标题效果:Literature review & Research set-up 在Latex里写的标题:\section{Literature Review & Res ...
- pandas mean 返回 inf
In [12]: np.finfo(np.float16).max Out[12]: 65500.0 In [15]: df['a']=np.array([656]*100) In [16]: df[ ...