canvas

最新推荐文章于 2021-07-08 15:07:22 发布

Abudula__

最新推荐文章于 2021-07-08 15:07:22 发布

阅读量263

点赞数 1

分类专栏： HTML Javascript

本文链接：https://blog.csdn.net/Abudula__/article/details/84952408

版权

Javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

在HTML中画图可以使用ｃａｎｖａｓ元素，这里简答的总结一下：
首先通过canvas元素实现画布,代码如下:

<!Doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
   //获取指定的canvas元素;
    var canvas=document.getElementById("canvas);
    //调用canvas元素的getContext方法访问获取2d渲染上下文。
    var context=canvas.getContext('2d');
</script>
</body>
</html>

然后通过javascript来获取canvas元素，需要记住的是所有的绘画操作在canvas的context对象中进行，而不是在convas这个元素对象中，并且我们的绘画是平面的，因此是二维的。

坐标

第一个必须得了解的概念是坐标，我们通过坐标的位置来控制绘画操作的开始以及结束位置。
在这里插入图片描述

以10为单位的话，那个红点就是（20，20），那A就是(30,50)。

矩形

在这里插入图片描述
fillRect会画出实心的矩形，strokeRect会画出空心的矩形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <style>
        #canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300px" height="300px"></canvas>
    <script>
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        context.strokeRect(40,20,80,80);
        context.fillRect(20,120,120,60);
    </script>
</body>
</html>

效果如下:
在这里插入图片描述

绘制线条

 var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        //开始设置路径
       context.beginPath();
       //设置路径原点
       context.moveTo(10,20);
       //设置路径终点
       context.lineTo(50,20);
       //绘画路径
       context.stroke();

三角形

 var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        //开始设置路径
       context.beginPath();
       //设置路径原点
       context.moveTo(100,50);
       //设置路径终点
       context.lineTo(100,200);
       context.lineTo(250,200);
       context.lineTo(100,50);   //可以通过contex.closePath();来代替，就是自动帮我们把路径闭合。
       //绘画路径
       context.stroke();
       context.fill();   //控制是否是实心

在这里插入图片描述

绘制文本

 var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
         context.fillText('fillText',20,50);
         context.strokeText('strokeText',20,100);
        
         context.font='30px 黑体';   //控制字体的大小以及字体类型
         context.fillText('strokeText2',20,200);

给图形上色

在这里插入图片描述

<canvas id="canvas" width="300px" height="300px"></canvas>
    <script>
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
		context.fillStyle='blue';  //只会其作用与它后后面的代码
        context.fillRect(50,50,160,160);

在这里插入图片描述

修改线条宽度

 var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
		context.fillStyle='blue';  //只会其作用与它后后面的代码
		context.lineWidth=10;       //控制宽度
        context.strokeRect(50,50,160,160);

擦除canvas

var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
		context.beginPath();
		context.arc(40,40,20,0,Math.PI*2,false);
		context.closePath();
		context.fill();
		context.clearRect(40,40,canvas.width,canvas.height);

Abudula__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas

在HTML中画图可以使用ｃａｎｖａｓ元素，这里简答的总结一下：首先通过canvas元素实现画布,代码如下:&amp;amp;amp;lt;!Doctype html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;/head&amp;amp;amp;gt;&amp;am
复制链接

扫一扫

专栏目录