Canvas简介-- 简单画一条直线及基础api

最新推荐文章于 2024-09-13 11:02:21 发布
最新推荐文章于 2024-09-13 11:02:21 发布
阅读量383 收藏
点赞数 1
分类专栏： Html5 文章标签： html5 css javascript canvas 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48446542/article/details/107816746
版权

Canvas元素是H5新特性之一, 可以通过脚本渲染图像

以下摘自W3school:

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

简单用canvas画一个直线步骤:

  1. 获取画布容器元素 (设置一个画布)
  2. 获取canvas的工具集
  3. 定位开始点
    浏览器坐标系跟我们高中坐标系学的相反, 屏幕左上角为原点, X轴向右, Y轴向下.
  4. 定位终点, 产生线段 (线段并未显示)
  5. 绘制线条
<body> 
    <!-- 1. 设置一块画布 -->
    <canvas id="pic" style="background-color: antiquewhite;"></canvas>

    <script type="text/javascript">
    // 2. 获取画布元素
    const pic = document.getElementById("pic");
    // 3. 获取工具集
    const pic_tools = pic.getContext("2d");
    // 4. 定位开始点坐标
    pic_tools.moveTo(60,60)
    // 5. 定位结束点坐标 (此时已产生直线, 但未渲染)
    pic_tools.lineTo(190,60)
    // 6. 绘制线条
    pic_tools.stroke()
    </script>
</body>

屏幕上效果
在这里插入图片描述

改变线条颜色:

pic_tools.strokeStyle = 'red'  // 变成红色线条

改变线条宽度:

pic_tools.lineWidth = 10  // 变成10的宽度

其他的几个基础绘制API

文字绘制

pic_tools.fillText('嘿嘿', 50, 50)   //  在50,50坐标上写嘿嘿
// 或者
pic_tools.strokeText('嘿嘿', 100, 100)  // 上面的是填充样式, 下面的是描边

文字样式设置

pic_tools.font = 'bold 50px'   //  在50,50坐标上写嘿嘿

对齐方式

pic_tools.textAlign = 'center'   // 水平方向对齐方式 属性值有left center right
pic_tools.textBaseLine= 'middle' // 垂直方向对齐方式

将绘制内容另存为图片

const xxUrl = pic.toDataURL('image/png',1)  // 返回一个base64的字符集, 1代表保存质量, 0最低, 1最高
// 打印到控制台
console.log(xxUrl)
桃子阿哥
关注
专栏目录
<canvas>学习笔记——绘制直线的API
jiulan1996的博客
05-02 801
can=document.getElementById("canvas");     ctx=can.getContext("2d"); 示例一： ctx.beginPath();//开始一条路径，或重置当前路径 定义线条样式： ctx.lineWidth="5";//设置或返回当前的线条宽度 ctx.strokeStyle="red";/设置或返回用于笔触的颜色、渐变或模式，
H5--canvas--笔记-画笔-直线-矩形-圆-圆弧
看开了
07-24 852
canvas学习笔记 1.获取画笔 通过DOM操作获取canvas元素节点之后(变量名为canvas); let ctx = canvas.getContext(“2d”); 就可以获取canvas的画笔了; 2.画笔的样式 对画笔的操作,也就是调用画笔对象的方法,所以以ctx.开头,方法名是小驼峰 画笔的宽度 ctx.lineWidth=“4”; 画笔的颜色 画笔的颜色因为画法的不同,分为两种...
WindowsAPI画线程序
11-29
本程序可简单实现一个会话框，并且可以在上面画图，可变更大小
canvas入门（四）绘制线的扩展api
风舞红枫的个人博客
03-26 265
在开始新的一节之前我们先来复习回顾上一节的遗留问题 <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext("2d"); contex...
画布（基础&绘画直线1.1）
王冉的博客
03-12 385
最简单的HTML5画布编程。包括： 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色，渐变和图案 绘制图片 绘制文本 HTML5中包含一个专门为HTML画布功能设计的标签：，所以相关的画布功能都是基于这个标签来完成。我们需要将它添加到HTML的body标签中，如下： 小提示：你可以将width和height添加到CSS文件中，但是和直接设置canvas的属性，有一定区别：使用属性来定义...
canvas绘制的直线动画
08-31
本文主要分享了canvas绘制的直线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas画板工具 uni-modules、画板、canvas、签名、电子签名、简约风、万能、免费、支持横竖屏
12-22
canvas画板工具结合uni-app，使得在这些平台上实现复杂绘图功能变得更加简单和高效。 画板工具中的曲线和直线绘制功能，通常通过定义起始点和终点，然后利用`moveTo()`和`lineTo()`方法在canvas上绘制。画圆则使用`...
Html5新特性用canvas标签画多条直线附效果截图
09-28
2. canvas标签基础使用：在HTML文档中使用canvas标签来创建一个绘图区域非常简单，只需添加一个<canvas>元素，并设置其宽(width)和高(height)属性。通过内联样式或CSS来为canvas定义样式，如边框、背景等。若需要在...
html5使用canvas画一条线
09-28
`moveTo`方法用于设置画笔的当前位置，而`lineTo`方法则会从当前位置画一条直线到指定的坐标。假设我们要从(20, 20)开始，画到(100, 20)，则代码如下： ```javascript cxt.moveTo(20, 20); cxt.lineTo(100, 20); ``...
微信小程序canvas画图功能实现
12-26
微信小程序canvas画图功能实现
微信小程序用canvas画图并分享
10-15
主要为大家详细介绍了微信小程序用canvas画图，并实现分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序利用Canvas绘制图片和竖排文字详解
12-09
前言 闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。 正文 首先放一张最终保存到相册的图片吧~ 自我感觉良好，至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧。 整个图片分为三个部分： 武将图片 小程序码 武将文字信息 先来看一下 wxml 里面的代码，主要是放了一个 canvas 标签，控制了一下高度和宽度属性。 <vie
android利用canvas画线 及点击移动
l6666_6666的博客
03-09 4833
public class DrawView extends View {        public DrawView(Context context) {          super(context);      }        @Override      protected void onDraw(Canvas canvas) {          super.onDraw(canvas...
【图片处理】Canvas基础入门——绘制简单的线和图形
ironprosper的博客
10-25 477
canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图形。
html画布直线代码,图文详解如何用html5 canvas画一条直线
weixin_29713403的博客
05-30 1151
是HTML5 中新增的元素，它可以结合JavaScript脚本绘制出各种各样的图形，对于canvas你了解多少？你会用canvas画直线吗？这篇文章就和大家讲讲如何用canvas画一条直线，有一定的参考价值，感兴趣的小伙伴可以看看哦。首先给大家介绍用canvas绘制直线需要用到的属性moveTo(x,y) 可以设置线条开始位置的坐标lineTo(x,y) 可以设置线条结束位置的坐标lineWid...
canvas学习（一）：线条，图像变换和状态保存
weixin_34268843的博客
10-13 147
canvas学习（一）：线条，图像变换和状态保存 一：绘制一条线段： var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') //状态设置 ctx.moveTo(0,300) ctx.lineTo(400,300) ctx.lineWidth = 20 ctx.stro...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
weixin_39999859的博客
12-20 1888
HTML5 Canvas基本概念讲解html5，这个应该就不需要多作介绍了，只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准，目前，除IE8及其以下版本的IE浏览器之外，几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。除此之外，在移动浏览器市场上，众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军...
HTML5中的重要元素详解
最新发布
业精于勤荒于嬉，行成于思毁于随
09-13 832
HTML文档中，元素html代表了文档的根，其他所有元素都是在该元素的基础上进行延伸或拓展的，该元素也是HTML文档的最外层元素，因此也称为根元素。
Canvas API学习笔记：基础绘制与实例解析
"canvas学习之API整理笔记（一）" 在Web开发中，Canvas是一个非常重要的技术，它允许开发者在网页上动态绘制图形。本文主要关注的是Canvas的API，特别是对于初学者如何掌握并运用这些API进行图形绘制。Canvas本身是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值