【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 ...
随机推荐
- 寄存器，cache、伙伴系统、内存碎片、段式页式存储管理
cache.伙伴系统.内存碎片.段式页式存储管理 目录 分层的存储管理 cache 局部性原理 置换算法 写回策略 linux环境下的cache 连续内存分配与内存碎片 内部碎片与外部碎片 动态分区分 ...
- Kafka Offset 1
Kafka Offset Storage 1.概述 目前,Kafka 官网最新版[0.10.1.1],已默认将消费的 offset 迁入到了 Kafka 一个名为 __consumer_offse ...
- java学习笔记（2）——函数
int a = 1; a = a++; 1,取出a的值1作为a++表达式的值(a++表达式等于1) 2,a增加1变为2 3,执行赋值运算,a++表达式的值再赋给a,a又成为了1. ---------- ...
- Neo4j集群环境建设
简介: Neo4j它是目前的主流地图数据库.它本身提供了高可用性集群解决方案.本文将试图建立一个高可用性neo4j周围环境. 1. 这是一个地图数据库? 图形库(graphic database)问题 ...
- linux 下Eclipse for C/C++的不常见设置
设置1:build project的时候,让编译器支持 三字母词. 项目文件右击--> Properties-->C/C++ Build--> Settings 如图设置: 再 C ...
- OpenGL（二十三） 各向异性纹理过滤
如果使用一般的纹理过滤,当观察方向跟模型表面不是相互垂直的的情况下,会出现纹理信息的丢失,表现为图像看上去比较模糊,如下图所示,远处场景的细节信息很差: 针对这种情况,可以采用同向异性过滤的方式处理纹 ...
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
- 第一泰泽（Tizen）智能手机发布在俄罗斯
请看下图: 这是韩国三星公司在俄罗斯境内公布的第一款泰泽(Tizen)智能手机(今年6月2日).这说明,Tizen操作系统没有死去. 在泰泽官网上将泰泽操作系统定义为:"The OS of ...
- ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 登录登出 上一章节我们总算完善了注册的功能,而且也添加了一个用户,现 ...
- SQL Server 2017 正式发布：同时支持 Windows 和 Linux（现在看下来，当年那德拉的“云优先，移动优先”是有远见的，而且是有一系列的措施和产品相配合的，只是需要一点时间而已。真是佩服！！）
微软在去年 3 月首次对外宣布了 Linux 版的 SQL Server,并于今年 7 月发布了首个公开 RC 版.前几日在美国奥兰多召开的微软 Ignite 2017 大会上,微软宣布 SQL Se ...