【canvas】基础练习一 图形
Demo1【绘制一条线】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo 1</title>
</head>
<body> <canvas id="wapper" width="200" height="200"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.lineWidth = 10;/*设置线条宽度*/ _2d.strokeStyle = 'red';/*设置线条颜色*/ _2d.beginPath();/*创建新的路径*/ _2d.moveTo(10,10);/*将画笔光标移动到画布坐标10，10*/ _2d.lineTo(150,50);/*画一条线到150，50*/ _2d.stroke();/*绘制定义的路径*/
</script>
</body>
</html>
Demo2【改变线帽样式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lineCap</title>
</head>
<body> <canvas id="wapper" width="200" height="200"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.lineWidth = 20;/*设置线条宽度*/
_2d.strokeStyle = 'red';/*设置线条颜色*/ _2d.beginPath();
_2d.lineCap = 'butt';/*默认。向线条的每个末端添加平直的边缘。*/
_2d.moveTo(10,10);
_2d.lineTo(150,10);
_2d.stroke(); _2d.beginPath();
_2d.lineCap = 'round';/*向线条的每个末端添加圆形线帽。*/
_2d.moveTo(20,50);
_2d.lineTo(150,50);
_2d.stroke(); _2d.beginPath();
_2d.lineCap = 'square';/*向线条的每个末端添加正方形线帽。*/
_2d.moveTo(20,90);
_2d.lineTo(150,90);
_2d.stroke();
</script>
</body>
</html>
demo3【绘制矩形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strokeRect</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ /*边框*/
_2d.beginPath();
_2d.lineWidth = 5;/*设置线条宽度*/
_2d.strokeStyle = 'red';/*设置线条颜色*/
_2d.strokeRect(10,10,200,50);/*strokeRect(起点x，起点y，矩形长，矩形宽)*/ /*实心*/
_2d.beginPath();
_2d.fillStyle = 'red';/*设置颜色*/
_2d.fillRect(10,100,100,50);/*fillRect(起点x，起点y，矩形长，矩形宽)*/
</script>
</body>
</html>
demo4【圆形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arc</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ /*边框*/
_2d.beginPath();
_2d.lineWidth = 2;
_2d.arc(100,100,50,0,360);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
_2d.stroke(); /*实心*/
_2d.beginPath();
_2d.fillStyle = 'red';/*设置颜色*/
_2d.arc(300,100,50,0,100*Math.PI/180,true);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
_2d.fill();
</script>
</body>
</html>
demo5【圆角矩形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arcTo</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ /*边框*/
_2d.beginPath();
_2d.lineWidth = 2;
_2d.moveTo(10,10);
_2d.lineTo(100,10);
_2d.arcTo(150,10,150,100,50);/*添加一条圆弧 起点我理解为转角的xy坐标 终点我理解为结束的xy坐标 arcTo(弧的起点的 x 坐标，弧的起点的 y 坐标， 弧的终点的 x 坐标，弧的终点的 y 坐标，弧的半径)*/
_2d.lineTo(150,100);
_2d.stroke(); </script>
</body>
</html>
demo6【擦除】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clearRect</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.beginPath();
_2d.fillStyle='red';
_2d.fillRect(0,0,500,500);
_2d.clearRect(20,20,100,200);/*clearRect(x起始坐标，y起始坐标，宽，高)*/ </script>
</body>
</html>
demo7【二次贝尔曲线quadraticCurveTo】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二次贝尔曲线quadraticCurveTo</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500); _2d.beginPath();
_2d.moveTo(20,20);
_2d.quadraticCurveTo(200,20,400,400);/*quadraticCurveTo(控制点x, 控制点y, 终点x, 终点y)*/
_2d.stroke(); </script>
</body>
</html>
demo8【三次贝尔曲线bezierCurveTo】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三次贝尔曲线bezierCurveTo</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500); _2d.beginPath();
_2d.moveTo(20,20);
_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)*/
_2d.stroke(); </script>
</body>
</html>
demo9【clip指定绘制区域】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clip指定绘制区域</title>
</head>
<body> <canvas id="wapper" width="500" height="500"></canvas> <script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/ _2d.arc(250,250,250,0,360*Math.PI/180);
_2d.clip(); _2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500); _2d.beginPath();
_2d.moveTo(20,20);
_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)*/
_2d.stroke(); </script>
</body>
</html>
【canvas】基础练习一 图形的更多相关文章
- canvas基础2--绘制图形
栅格 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先 ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
- canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
- canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...
- canvas基础知识
canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...
随机推荐
- matlab 求解线性规划问题
线性规划 LP(Linear programming,线性规划)是一种优化方法,在优化问题中目标函数和约束函数均为向量变量的线性函数,LP问题可描述为: minf(x):待最小化的目标函数(如果问题本 ...
- yii2 实现无极限分类
在商城项目或者其他的项目中无极限分类是非常常见的场景 那么许多人都会这样干 利用递归每次查询数据库,说来惭愧,我以前也是这样干的 总有点误人子弟的感觉 这样做在数据量大的情况下会有一定的延迟 publ ...
- sql 连接查询
什么是连接查询呢 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据. 目的:实现多个表查询操作. 分类 首先划分一下,连接分为三种:内连接.外连接.交叉连接 内连接(INNER JOIN): ...
- LeetCode: Generate Parentheses [021]
[称号] Given n pairs of parentheses, write a function to generate all combinations of well-formed pare ...
- 转：spring MVC HTTP406 Not Acceptable
springMVC框架下,ajax请求,在用json对象返回的时候,可以用如下的形式: response.setContentType("text/html;charset=UTF-8&qu ...
- 我所理解的设计模式（C++实现）——观察者模式（Observer Pattern）
概述: 近期中国股市起起伏伏,当然了起伏就用商机,小明发现商机后果断想入市,买入了中国证券,他想在电脑client上,网页上,手机上,iPad上都能够查看到该证券的实时行情,这样的情况下我们应该怎么设 ...
- ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 标签助手 上一章节我们介绍了视图导入,学习了 ...
- C 语言main 函数终极探秘（&& 的含义是：如果 && 前面的程序正常退出，则继续执行 && 后面的程序，否则不执行）
所有的C程序必须定义一个称之为main的外部函数,这个函数是程序的入口,也就是当程序启动时所执行的第一个函数,当这个函数返回时,程序也将终止,并且这个函数的返回值被看成是程序成功或失败的 ...
- ng-alain 复用标签相关设置
排除复用 import { ReuseTabMatchMode, ReuseTabService } from '@delon/abc'; export class StartupService { ...
- 线程安全ConcurrentBag
ConcurrentBag并行,不保证顺序,线程安全 public static void ConcurrentBagWithPallel() { ConcurrentBag<int> l ...