【canvas绘制图形】

已于 2022-02-08 17:46:12 修改
阅读量973 收藏 1
点赞数
文章标签： 前端
于 2022-02-08 17:44:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_shun66/article/details/122828426
版权

canvas绘制图形

一、绘制圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cav{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 推荐在canvas标签上去写宽和高
    宽高比 2 ：1 -->
    <canvas id="cav" width="600px" height="300px"></canvas>
    <script>
        let cav = document.getElementById('cav');
        let c = cav.getContext('2d');
        /* c.arc(x, y, radius, starAngle,endAngle, anticlockwise) */
        /*   x和y	圆心的x坐标和y坐标
            radius	圆形的半径
            starAngle和endAngle	开始的角度和结束的角度
            anticlockwise	逆时针(true)，顺时针(false) */
        c.beginPath();
        /* Math.PI表示180度 */
        /* 圆多大是由半径控制的 */
        c.arc(150,150,100,0,Math.PI*3/2,false)
        c.fillStyle = 'blue'
        c.fill()
        c.closePath();
    </script>
</body>
</html>

二、绘制三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cav{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 推荐在canvas标签上去写宽和高
    宽高比 2 ：1 -->
    <canvas id="cav" width="600px" height="300px"></canvas>
    <script>
        let cav = document.getElementById('cav');
        let c = cav.getContext('2d');
        c.beginPath();//开始创建路径
        c.moveTo(10,10)
        c.lineTo(100,150)
        c.lineTo(200,10)
        c.lineTo(10,10)
        //设置线条的颜色值
        c.strokeStyle = 'red'
        //设置线条的粗细
        c.lineWidth = "5"
        //填充颜色
        c.fillStyle = 'blue'
        //填充
        c.fill();
        c.closePath();
        c.stroke();

        /* 如果需要闭合路径，开始新的起点路径时，都需要创建和关闭路径 */
        c.beginPath();//开始创建路径
        c.moveTo(210,10)
        c.lineTo(250,150)
        c.lineTo(300,10)
        c.lineTo(210,10)
        //设置线条的颜色值
        c.strokeStyle = 'blue'
        //设置线条的粗细
        c.lineWidth = "5"
        c.fillStyle = 'yellow'
        c.fill();
        c.closePath();
        c.stroke();
    </script>
</body>
</html>

三、 绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cav{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 推荐在canvas标签上去写宽和高
    宽高比 2 ：1 -->
    <canvas id="cav" width="600px" height="300px"></canvas>
    <script>
        let cav = document.getElementById('cav');
        let c = cav.getContext('2d');

        c.fillStyle='red'
        //填充矩形
        c.fillRect(20,20,200,100)

        //绘制矩形边框
        c.lineWidth = '10'
        c.strokeStyle = "pink";
        c.strokeRect(20,20,200,100)

       
        
        cav.onmousedown = function(e){
            let event = e||window.event;
            console.log(event.clientX);
            console.log(event.clientY);
             /* 清除矩形内的一块区域 */
            c.clearRect(event.clientX,event.clientY,300,200)
        }
    </script>
</body>
</html>
木林森里没有木
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas图形绘制
流楚丶格念的博客
02-03 3701
文章目录Canvas图形绘制矩形绘制createLinearGradient()方法圆弧绘制弧度概念用三角函数体验曲线的绘制arc() 方法画圆弧圆实例练习绘制六种颜色等分的圆绘制扇形绘制数据饼图绘制文本案例：画布中心绘制文字圆与文本综合案例：数据饼状图 Canvas图形绘制 矩形绘制 rect(x,y,w,h) 没有独立路径 strokeRect(x,y,w,h) 有独立路径，不影响别的绘制 fillRect(x,y,w,h) 有独立路径，不影响别的绘制 clearRect(x,y,w,h) 擦除矩形区
canvas绘制图形
星星有所不知
03-20 383
canvas绘制图形1. canvas默认的width:300px、height:150px。2. canvas只支持一种原生的图形绘制：矩形。2.1 canvas绘制矩形的3种方式：3. 图形的基本元素是路径。3.1 绘制路径步骤：3.2 绘制圆弧的两种方式：3.3 绘制贝塞尔曲线：4. 参考 1. canvas默认的width:300px、height:150px。 也可以通过css来设置wi...
Canvas绘制图形
weixin_45785873的博客
04-20 1119
由于 HTML5 Canvas 是一个图形工具，所以不用说它可以让我们绘制形状。我们可以通过我们设置的上下文使用许多不同的函数来绘制新的形状。fillRect绘制矩形、arc绘制圆形、圆弧、扇形等等
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 3860
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
使用canvas绘制图形
m0_53007349的博客
09-06 4213
canvas是html5新增的专门用来绘制图形的元素，在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中使用方法进行图形的绘制。
vue+canvas绘制图形
01-09
首先，我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一，它允许我们将UI拆分成独立、可复用的部分。在这个项目中，我们可以创建一个名为`Canvas.vue`的Vue组件，专门负责处理Canvas元素。在`...
JavaScript实现使用Canvas绘制图形的基本教程
10-21
Canvas让开发者能够在网页上进行复杂的绘图操作，如绘制图形、图像、动画等等。在HTML5中使用Canvas元素，可以实现客户端绘图，不再完全依赖服务器端生成图片，这大大提高了效率和交互性。 在本文中，将介绍如何...
Html利用Canvas绘制图形
07-16
在这个主题中，“Html利用Canvas绘制图形”涵盖了多种形状的绘制方法，包括基础形状和复杂图案。接下来，我们将详细探讨如何使用Canvas API来实现这些图形。 1. **圆形**：在Canvas上绘制圆形，可以使用`arc()`方法...
js+canvas绘制图形验证码.docx
01-19
完整代码：\n结合上述所有步骤，以下是一个完整的JavaScript和Canvas绘制图形验证码的示例。\n```html\n<!DOCTYPE ...
canvas绘制各个图形
Fine9548的博客
06-04 375
Canva绘制图形 < canvas >看起来和< img >标签一样，只是 < canvas > 只有两个可选的属性 width、heigth 属性，指定绘图区域大小，但没有 src、alt 属性。 如果不给< canvas >设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，它会出现扭曲。所以，建议不要使用css属性来设置< canvas
canvas 图形的基本绘制
weixin_42254598的博客
11-27 625
canvas 图形的基本绘制
canvas图形绘制
weixin_34090562的博客
08-28 87
前面的话 　　前面分别介绍了canvas的基础用法和进阶用法，本文将使用canvas的各种语法进行图形绘制   绘制线条 【绘制线条】 　　下面来尝试绘制一段线条 &lt;canvas id="drawing" style="border:1px solid black"&gt; &lt;p&gt;The canvas element is not supported!&...
[HTML5] Canvas绘制简单形状
程序员老狼专注开发aigc或客服系统应用
05-11 98
使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画 获取canvas对象，调用document.getElementById()方法 调用canvas对象的getContext()方法，获取context对象，参数：String的”2d” 绘制线段 调用context对象的moveTo()方法，把起点位置定义好，参数：x，y ...
Canvas绘制图形图像
依宸2016
07-09 488
//矩形 function drawRect(id) { var canvas = document.getElementById(id); var content = canvas.getContext("2d"); content.fillStyle = "#FF0000";//定义填充色
【HTML5】 canvas 绘制图形
qq_45677671的博客
01-15 2885
使用 canvas 绘制图形用法详解
使用canvas画图形
飞翔的小白
03-23 413
参考文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images 图形效果： 代码实现： var cartFlag = true; var personFlag = true; if (personFlag) { // 人的图形 canvas.beginPath(); // .
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 5207
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值