canvas的基础入门

程序员文章站 2022-03-02 10:59:36

canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习！一、创建canvas 看一下现在的效果: 除了上述代码那样指定canva ......

canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3d动态效果。接下来我们一起学习！

一、创建canvas

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>canvas基础</title>
 9 </head>
10 
11 <body>
12     <canvas id='canvas' width='700' height='400' style="border: 1px solid #aaa;display:block;margin:50px auto "></canvas>
13 </body>
14 
15 </html>

看一下现在的效果:

canvas的基础入门

除了上述代码那样指定canvas的宽高，还可以在js中这样指定:

1 var canvas = document.getelementbyid('canvas');
2 
3  canvas.width = 700;
4  canvas.height = 400;

这样边框内就是一个画布了，接下来我们就可以在这画布里进行绘制了。

二、画一条线段

 1 <script>
 2     window.onload = function () {
 3         var canvas = document.getelementbyid('canvas'); //获取canvas
 4 
 5         canvas.width = 700;                 //设定canvas的宽度  
 6         canvas.height = 400;                //设定canvas的高度
 7 
 8         if (canvas.getcontext('2d')) {
 9 
10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
11 
12             context.moveto(100, 100)        //画笔的起始位置
13             context.lineto(500, 300)        //画笔的结束位置
14             context.linewidth = 5;          //线的宽度
15             context.strokestyle = '#005588' //线的颜色
16             context.stroke()                //开始绘制
17 
18         } else {
19             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
20         }
21     }
22 </script>

看一下效果图:

canvas的基础入门

三、画一个三角形并着色

 1 <script>
 2     window.onload = function () {
 3         var canvas = document.getelementbyid('canvas'); //获取canvas
 4 
 5         canvas.width = 700;                 //设定canvas的宽度  
 6         canvas.height = 400;                //设定canvas的高度
 7 
 8         if (canvas.getcontext('2d')) {
 9 
10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
11 
12             context.moveto(100, 100)        //画笔的起始位置
13             context.lineto(500, 300)        //画笔的结束位置
14             context.lineto(100, 300)        //画笔的结束位置
15             context.lineto(100, 100)        //画笔的结束位置
16 
17             context.fillstyle='rgb(2,100,30)'   //设置填充颜色
18             context.fill()                      //开始进行着色
19 
20             context.linewidth = 5;          //线的宽度
21             context.strokestyle = 'red' //线的颜色
22             context.stroke()                //开始绘制
23 
24         } else {
25             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
26         }
27     }
28 </script>

效果图:

canvas的基础入门

四、绘制两个图形

 1 <script>
 2     window.onload = function () {
 3         var canvas = document.getelementbyid('canvas'); //获取canvas
 4 
 5         canvas.width = 700;                 //设定canvas的宽度  
 6         canvas.height = 400;                //设定canvas的高度
 7 
 8         if (canvas.getcontext('2d')) {
 9 
10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
11 
12             context.beginpath()            //开始一个新的路径绘制
13 
14             context.moveto(100, 100)        //画笔的起始位置
15             context.lineto(500, 300)        //画笔的结束位置
16             context.lineto(100, 300)        //画笔的结束位置
17             context.lineto(100, 100)        //画笔的结束位置
18 
19             context.closepath()             //结束一个路径的绘制
20 
21             context.fillstyle='rgb(2,100,30)'   //设置填充颜色
22             context.fill()                      //开始进行着色
23 
24             context.linewidth = 5;          //线的宽度
25             context.strokestyle = 'red'     //线的颜色
26             context.stroke()                //开始绘制
27 
28             context.beginpath()            //开始一个新的路径绘制
29 
30             context.moveto(100,50)          //画笔的起始位置
31             context.lineto(600,300)         //画笔的结束位置
32 
33             context.closepath()             //结束一个路径的绘制
34 
35             context.linewidth = 3;          //线的宽度
36             context.strokestyle = 'yellow'    //线的颜色
37             context.stroke()                //开始绘制
38             
39 
40         } else {
41             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
42         }
43     }
44 </script>

效果图:

canvas的基础入门

五、绘制一个七巧板

 1 <script>
 2     var tangram = [
 3         { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: '#caff67' },
 4         { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: '#67becf' },
 5         { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: '#ef3d61' },
 6         { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: '#f9f51a' },
 7         { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: '#a594c0' },
 8         { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: '#fa8ecc' },
 9         { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: '#f6ca29' },
10     ]
11     window.onload = function () {
12         var canvas = document.getelementbyid('canvas'); //获取canvas
13 
14         canvas.width = 800;                 //设定canvas的宽度  
15         canvas.height = 800;                //设定canvas的高度
16 
17         if (canvas.getcontext('2d')) {
18 
19             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
20 
21             for (var i = 0; i < tangram.length; i++) {
22                 draw(tangram[i], context)
23             }
24 
25 
26         } else {
27             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
28         }
29     }
30 
31     function draw(piece, context) {
32         context.beginpath();
33         context.moveto(piece.p[0].x, piece.p[0].y);
34         for (var i = 1; i < piece.p.length; i++) {
35             context.lineto(piece.p[i].x, piece.p[i].y)
36         }
37         context.closepath();
38 
39         context.fillstyle = piece.color;
40         context.fill();
41 
42         context.strokestyle = 'black';
43         context.linewidth = 3;
44         context.stroke();
45 
46     }
47 </script>

效果图:

canvas的基础入门

六、绘制一段弧

 1 <script>
 2     window.onload = function () {
 3         var canvas = document.getelementbyid('canvas'); //获取canvas
 4 
 5         canvas.width = 600;                 //设定canvas的宽度  
 6         canvas.height = 600;                //设定canvas的高度
 7 
 8         if (canvas.getcontext('2d')) {
 9 
10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
11 
12             context.linewidth = 5;
13             context.strokestyle = '#005588';
14             context.arc(300, 300, 200, 0, 1.5 * math.pi);
15             context.stroke();
16 
17         } else {
18             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
19         }
20     }
21 </script>

context.arc各参数的含义:

1  　　context.arc(
2                 centerx ,           //圆心的x轴坐标位置
3                 centery,            //圆心的y轴坐标位置
4                 radius,             //圆弧半径的值
5                 startingangle,      //以哪个弧度制开始
6                 endingangle,        //在哪个弧度制结束
7                 anticlockwise=false //顺时针方向绘制,为true则逆时针。默认为顺时针。
8             )

效果图:

canvas的基础入门

改为逆时针的话，在context.arc里面添加参数true

context.arc(300, 300, 200, 0, 1.5 * math.pi,true);

效果图:

canvas的基础入门

七、绘制多段弧和着色

 1 <script>
 2     window.onload = function () {
 3         var canvas = document.getelementbyid('canvas'); //获取canvas
 4 
 5         canvas.width = 1000;                 //设定canvas的宽度  
 6         canvas.height = 600;                //设定canvas的高度
 7 
 8         if (canvas.getcontext('2d')) {
 9 
10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境
11 
12             context.linewidth = 5;
13             context.strokestyle = '#005588';
14 
15             for (var i = 0; i < 10; i++) {
16                 context.beginpath();
17                 context.arc(50 + i * 100, 100, 40, 0, 2 * math.pi * (i + 1) / 10);
18                 context.closepath();
19                 context.stroke();
20             }
21 
22             for (var i = 0; i < 10; i++) {
23                 context.beginpath();
24                 context.arc(50 + i * 100, 300, 40, 0, 2 * math.pi * (i + 1) / 10);
25 　　　　　　　　　　　　　　　　　　　　
26                 context.stroke();
27             }
28 
29             context.fillstyle = '#005588'
30             for (var i = 0; i < 10; i++) {
31                 context.beginpath()
32                 context.arc(50 + i * 100, 500, 40, 0, 2 * math.pi * (i + 1) / 10);
33                 context.closepath()
34 
35                 context.fill()
36             }
37 
38         } else {
39             alert('您的浏览器不支持canvas,请更换浏览器尝试~')
40         }
41     }
42 </script>

效果图:

canvas的基础入门

可以看出绘制多个弧也是使用beginpath()和closepath()。但是绘制出来的弧自动的把首尾连接起来了，成了一个封闭的弧。这是因为closepath()的原因，如果想只是展示不封闭的弧，只需要把context.closepath()这段代码去掉就行。beginpath()和closepath()并不一定成对出现。填充的时候，有closepath()和没有closepath()效果是一样的。

上一篇： Vue 2.0 深入源码分析(四) 基础篇响应式原理 data属性

下一篇： Vue 2.0 深入源码分析(三) 基础篇模板渲染 el、emplate、render属性详解

canvas的基础入门

Microsoft Visual Studio添加引用的基础教程

JavaScript基础教程之如何实现一个简单的promise

asp.net基础学习之控件的使用方法

介绍Jersey-Jersey入门基础

Three.js的使用及绘制基础3D图形详解

html5简单特效代码（html5零基础入门教程）

Oracle 的入门心得强烈推荐

浅谈区块链和网站建设之间的关系网站是基础

基于ASP.NET MVC的ABP框架入门学习教程

ABP框架的基础配置及依赖注入讲解

canvas的基础入门

Microsoft Visual Studio添加引用的基础教程

JavaScript基础教程之如何实现一个简单的promise

asp.net基础学习之控件的使用方法

介绍Jersey-Jersey入门基础

Three.js的使用及绘制基础3D图形详解

html5简单特效代码（html5零基础入门教程）

Oracle 的入门心得 强烈推荐

浅谈区块链和网站建设之间的关系 网站是基础

基于ASP.NET MVC的ABP框架入门学习教程

ABP框架的基础配置及依赖注入讲解

Oracle 的入门心得强烈推荐

浅谈区块链和网站建设之间的关系网站是基础