【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 ...

随机推荐

【38.24%】【codeforces 621E】 Wet Shark and Blocks
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
xaml 添加 region
原文:xaml 添加 region 本文告诉大家如何在 xaml 添加 region 在 VisualStudio 2015 和 VisualStudio 2017 微软支持在 xmal 使用 reg ...
Cocos2d-X中国象棋的发展《五岁以下儿童》摆棋
在博客上,以实现创建的游戏场景.而一些button,因为button落实到事件作出详细答复,需要使用一些功能摆棋.为此我特意button上的背面的具体实施, 在摆棋前先理清一下摆棋的思路: 1.创建一 ...
Valid page threshold based garbage collection for solid state drive
A method for garbage collection in a solid state drive (SSD) includes determining whether the SSD is ...
Method and apparatus for establishing IEEE 1588 clock synchronization across a network element comprising first and second cooperating smart interface converters wrapping the network element
Apparatus for making legacy network elements transparent to IEEE 1588 Precision Time Protocol operat ...
visualsvn server 提交修改日志
修改日志时遇到以下错误: Repository has not been enabled to accept revision propchanges;ask the administrator to ...
1.开始第一个MVC项目
安装就不说了 1.在指定路径创建好项目文件夹之后,打开cmd,进去这个文件夹路径下输入命令 dotnet new mvc 就会在文件夹内创建一个mvc项目 2.创建好项目之后直接在这个路径下输入 ...
WPF中如何选择合适的元数据标记？(英文)
原文:WPF中如何选择合适的元数据标记?(英文) FrameworkPropertyMetadataOptions Enumeration:Specifies the types of framewo ...
POCO文档翻译：POCO C++库入门指南
内容目录介绍 Foundation库 XML库 Util库 Net库将这些东西组合到一起介绍 POCO C++库是一组开源C++类库的集合,它们简化及加速了用C++来开发以网络功能为核心的可移植 ...
分享一下Oracle 10g和Toad for Oracle的安装步骤
三年前用过Oracle,单纯的“用过”,主要就是说对数据库的一些操作,还不包含创建一些存储过程之类的,所以对Oracle仅仅只是了解一点儿,因为当时那家公司里面,数据库里面的东西都是那些顾问负责的,再 ...

【canvas】基础练习一 图形

Demo1【绘制一条线】

Demo2【改变线帽样式】

demo3【绘制矩形】

demo4【圆形】

demo5【圆角矩形】

demo6【擦除】

demo7【二次贝尔曲线quadraticCurveTo】

demo8【三次贝尔曲线bezierCurveTo】

demo9【clip指定绘制区域】

【canvas】基础练习一 图形的更多相关文章

随机推荐

热门专题

【canvas】基础练习一图形

【canvas】基础练习一图形的更多相关文章