【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 ...
随机推荐
- 经典书单、站点 —— 大数据/数据分析/R语言
1. 科普.入门 <大数据智能>,刘知远.崔安顺等著: 特色:系统,宏观和全面: 2. R 语言站点 http://langdawei.com/:R 语言数据采集与可视化:
- C#或者WPF中让某个窗体置顶
原文:C#或者WPF中让某个窗体置顶 前记:在工作中有个需求,要求不管到那个界面,我必须让一个浮动条(其实是个窗体)置顶. 我用wpf,因为有之前有好几个界面已经设置成topmost了,所以在这几个界 ...
- Java -Android 得知（第四天）
添加一个新的Activity 我们已经了解到一个Activity就相当于是一个界面(当然了.这样说并不严格,但易于理解). 当我们创建一个安卓应用程序之后.就默认创建了: ①.一个继承Activ ...
- linux的各个子系统
Linux基本的子系统主要有CPU.Memory.IO.Network. 在这些子系统中,它们之间相互之间高度依赖.不论什么一个子系统的高负载都会引起其它子系统出现故障. 比如: 大量的页调入请求对内 ...
- OpenGL（四） 左右手坐标系及基本坐标变换
左手坐标系.右手坐标系.笛卡尔坐标系 左手坐标系:伸开左手,大拇指指向X轴正方向,食指指向Y轴正方向,其他三个手指指向Z轴正方向. 右手坐标系:伸开右手,大拇指指向X轴正方向,食指指向Y轴正方向,其他 ...
- WPF字体图标——IconFont
原文:WPF字体图标--IconFont 版权声明:本文为[CSDN博主:松一160]原创文章,未经允许不得转载. https://blog.csdn.net/songyi160/article/de ...
- sql 1=1
大多数时候是为了sql拼写方便而加的条件从执行任务来看,不影响性能
- Qt 显示 GIF
Qt 中,静态图片 PNG,JPG 等可以用其创建 QPixmap,调用 QLabel::setPixmap() 来显示,但是能够具有动画的 GIF 却不能这么做,要在 QLabel 上显示 GIF, ...
- 线性渐变、辐射渐变、角度渐变-QLinearGradient，QRadialGradient，QConicalGradient
渐变,是指逐渐的,有规律性的变化,是一种规律性很强的现象.Qt提供了一个与渐变相关的QGradient类,目前支持三种渐变画刷,分别是线性渐变(QLinearGradient).辐射渐变(QRadia ...
- js 层的显示和隐藏
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...