canvas画正方形、三角形以及虚线

已于 2022-08-28 12:45:10 修改
阅读量2.1k 收藏 3
点赞数 1
分类专栏： Canvas 文章标签： canvas
于 2021-06-18 16:04:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118028316
版权

1.画正方形

代码如下

<style>
    canvas {
   
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>
    <script>
        
        //获取画布
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        /*
        //开启一条路径
        ctx.beginPath();
        //确定起始点
        ctx.moveTo(100, 100);
        //确定结束点
        ctx.lineTo(400, 100);
        //着色之前设置颜色和线宽
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 5;
        //着色
        ctx.stroke();
        //结束路径
        ctx.closePath();
        */
function drawLine(x1, y1, x2, y2, color, width) {
   
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.lineWidth
最低0.47元/天 解锁文章
_enzo
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas画笔的基本使用
流楚丶格念的博客
02-03 4848
文章目录Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档 Canvas画笔的基本使用 图形绘制 需要理解些概念： 路径的概念 路径的绘制 描边 stroke() 填充 fill() 闭合路径 手动闭合 程序闭合 closePath() 填充规则(非零环绕) 开启新的路径 beginPath() 设置样式 画笔的状态 lineWidth 线宽，默认1px lineCap 线末端类型：(butt默
html5 canvas绘制圆形、方形矩形、线段、图片等各种图形（面向对象版本）
2401_84091938的博客
05-11 343
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
tkinter Canvas 实现 鼠标手绘画板 功能
wodeyan001的博客
06-13 3493
下面代码简单实现了画板功能，也是Canvas的教程，都加了注释。 通过列表来存储笔画，实现撤销恢复功能，右键有菜单。 import tkinter as tk from tkinter import ttk class tkinter_example(object): def __init__(s): s.win = tk.Tk() # 创建主窗口 s.win.title("tkinter Canvas") # 窗口标题
canvas画布基本知识点总结
m0_47966287的博客
02-17 1266
List item
canvas画布
傻瓜的博客
07-02 1198
Linux常用命令列出目录内容ls -a：显示所有文件（包括隐藏文件）；ls -l：显示详细信息；ls -R：递归显示子目录结构；ls -ld：显示目录和链接信息；ctrl+r：历史记录中所搜命令（输入命令中的任意一个字符）；Linux中以.开头的文件是隐藏文件；pwd:显示当前目录 查看文件的类型file:查看文件的类型复制文件目录cp：复制文件和目录 cp源文件（文件夹）目标文件（文件夹）常用
Android之 Canvas绘制
qq_29848853的博客
09-05 1801
Android之 Canvas绘制
canvas-画布
weixin_44486539的博客
12-02 2546
HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。 **注意**：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 `width` 、`height` 属性进行设置，否则会出现问题。
canvas入门，一篇博文带你学会用代码绘画，直击实战案例！
贪吃ღ大魔王
06-17 1540
canvas 简单说明 canvas是html5的一个标签，代表一个画布，可以在上面进行绘画、动画等操作。画布默认大小是300*150。 canvas标签本省只是画布，要实现上面有文字、线条等呈现，需要使用js实现。总之，画布上一切的呈现，都需要使用js来实现。canvas标签本质上就是一张图片，只是一张空白图片。 创建好的画布，要在上面进行绘画，需要使用js，用js操作canvas标签的 - canvas技术 canvas标签，需要将画布调整大小的时候，加样式只是能改变视觉效果，真实的画布大小并没有改变
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
11【canvas 1/2】canvas绘图+绘制平行线+三条不同颜色和宽度的平行线+一个填充的三角形+一个镂空正方形+绘制虚线+绘制一个从黑到白的渐变矩形+绘制点+矩形+网格+坐标系+折线图
南北极之间
04-30 1341
01-体验canvas绘图.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ ...
html5使用canvas画三角形
09-28
在Canvas上绘制三角形，我们需要使用`beginPath()`、`moveTo()`、`lineTo()`和`closePath()`方法。首先，`beginPath()`开始一个新的路径，`moveTo()`指定路径的起始点，而`lineTo()`则添加路径上的点。`closePath()`...
利用三角函数在canvas上画虚线的方法
09-27
总结来说，利用三角函数在Canvas上画虚线的方法主要涉及以下知识点： 1. 获取和使用Canvas的2D渲染上下文。 2. 计算两点之间的距离，即线段长度。 3. 根据虚线段长度和线段数量，计算每个虚线段在X轴和Y轴上的间距。...
AutoJs源码-canvas画正方形
11-14
AutoJs源码-canvas画正方形。本资源购买前提醒：本源码都是实际autojs项目模板，安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担...
H5 Canvas三角形图案动画特效
06-24
总结来说，“H5 Canvas三角形图案动画特效”涉及到HTML5 Canvas的基本绘图操作，包括路径创建、填充和描边、旋转、缩放和平移，以及利用`requestAnimationFrame()`实现动画效果。通过理解和掌握这些知识点，开发者...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
canvas画布虚线边框
06-06
你可以通过设置 `border-style` 属性为 `dashed` 或 `dotted` 来创建虚线边框。同时，你需要设置 `border-width` 属性来控制边框的粗细。例如，以下代码将创建一个4像素宽的虚线边框： ```css canvas { border: 4px dashed black; } ``` 如果你希望边框颜色为透明，可以使用 `rgba()` 函数来设置 `border-color` 属性，例如： ```css canvas { border: 4px dashed rgba(0, 0, 0, 0.5); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值