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

随机推荐

Android菜鸟的成长笔记（20）——IntentService
前面介绍的Service在官方文档介绍中说Service存在着如下两个问题: 1.A Service is not a separate process. The Service object its ...
让delphi2010操作界面回到delphi7模式
让delphi2010操作界面回到delphi7模式在使用delphi2010的过程中,很不习惯它的窗口在一个框框内,感觉很不方便,可能是因为使用delphi7很多年了,已经习惯了delphi7的版 ...
HDU 1143 Tri Tiling （递推）
Tri Tiling Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
中英文对照 —— 手机 App/PC 端软件（系统）、互联网
0. 经典 & 缩略词 SMS:short message service,短信息服务, SMS code,短信验证码: swipe:vt. 猛击:偷窃:刷-卡 Swipe up/down/r ...
极简代码（八）—— binary activation function
二值化的激活函数: x > 1 ? 1 : -1; ⇒ [1, -1]; x = 0 ⇒ -1; 当然也可以使用sign() 函数(求符号函数): sign(x) % 但要注意的是,sign(0 ...
编写可移植C/C++程序的要点（12条）
1.分层设计,隔离平台相关的代码.就像可测试性一样,可移植性也要从设计抓起.一般来说,最上层和最下层都不具有良好的可移植性.最上层是GUI,大多数GUI都不是跨平台的,如Win32 SDK和MFC.最 ...
uboot通过使用U磁盘引导内核RT5350成功
今天,在下次尝试使用16G 的u菜.这让两个分区,A位于zimage.一家商店rootfs:在uboot加载分区zimage并成功推出! RT5350 # fatload usb 0:1 0x80c0 ...
XF 列表视图事件
<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http:// ...
XF 滑块和步进控件
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http:/ ...
EF CodeFirst的步骤
1 创建各个实体类 2 创建一个空数据模型,然后删除掉,为了引入Entity Framework和System.Data.Entity 3 为实体类增加标注 4 为实体增加导航属性 5 在App.co ...

【canvas】基础练习一 图形

Demo1【绘制一条线】

Demo2【改变线帽样式】

demo3【绘制矩形】

demo4【圆形】

demo5【圆角矩形】

demo6【擦除】

demo7【二次贝尔曲线quadraticCurveTo】

demo8【三次贝尔曲线bezierCurveTo】

demo9【clip指定绘制区域】

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

随机推荐

热门专题

【canvas】基础练习一图形

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