【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 ...
随机推荐
- java序列化框架（protobuf、thrift、kryo、fst、fastjson、Jackson、gson、hessian）性能对比
我们为什么要序列化 举个栗子:下雨天我们要打伞,但是之后我们要把伞折叠起来,方便我们存放.那么运用到我们java中道理是一样的,我们要将数据分解成字节流,以便存储在文件中或在网络上传输,这叫序列 ...
- 对Java字符串的探究
问题的出发点 在网上看到一道题: 1 String str = new String("abc"); 以上代码执行过程中生成了多少个 String 对象? 答案写的是两个.&quo ...
- IdentityServer4实战 - 谈谈 JWT Token 的安全策略
原文:IdentityServer4实战 - 谈谈 JWT Token 的安全策略 一.前言 众所周知,IdentityServer4 默认支持两种类型的 Token,一种是 Reference To ...
- Computer system with dual operating modes
A system switches between non-secure and secure modes by making processes, applications, and data fo ...
- 自定义adapter 的getView方法被重复执行了n次的解决方法
1. getView执行的次数和你的getCount没有直接的关系 ,getCount和你listView里面的条目数量(行数量)有关系 ,getView方法执行次数取决于你屏幕上显示几个条目,比 ...
- AdaBoost算法原理及OpenCV实例
备注:OpenCV版本 2.4.10 在数据的挖掘和分析中,最基本和首要的任务是对数据进行分类,解决这个问题的常用方法是机器学习技术.通过使用已知实例集合中所有样本的属性值作为机器学习算法的训练集,导 ...
- ASP.NET Core 配置 EF SQLite 支持 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 配置 EF SQLite 支持 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 配置 EF SQLite 支持 上一章节我有提 ...
- crossplatform---Nodejs in Visual Studio Code 03.学习Express
1.开始 下载源码:https://github.com/sayar/NodeMVA Express组件:npm install express -g(全局安装) 2.ExpressRest 打开目录 ...
- qt4.8.7 源码在win7+vs2010环境的x64编译(qt 64位)
由于qt官网上,没有直接提供x64的安装包,但由于项目需要x64的qt,所以,小编不得不下载qt的源码,经历了一次长达约4个小时的编译过程.今年国庆7天,就遭这事上了,哈哈~~~ 几个下载链接: qt ...
- C++ 中间statickeyword
static顾名思义是一个静态的含义.在此我想谈谈相关的系统statickeyword角色,当然,这主要是对语言的发展C与C++角色,在信息方面的作用等方面,请另找.在评论中肯定有不恰当,请大胆地抛砖 ...