Canvas的简单绘制

最新推荐文章于 2024-04-20 16:29:18 发布
最新推荐文章于 2024-04-20 16:29:18 发布
阅读量711 收藏 1
点赞数
分类专栏： Canvas 文章标签： canvas js css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41136216/article/details/107884873
版权

文章目录

一、Canvas画布要绘制出来得使用canvas标签

<!DOCTYPE html>
<html>
<body>

<canvas width="200" height="200"
style="border:1px solid red;">
</canvas>

</body>
</html>

在这里插入图片描述

二、使用JS绘制Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="200"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,200);
</script>

</body>
</html>

在这里插入图片描述

以上步骤写为以下几步：
步骤1：获取元素对象

var canvas = document.getElementById("myCanvas");

步骤2：创建2D内容对象

var ctx = canvas.getContext("2d");

步骤3：给2D内容对象填充颜色

ctx.fillStyle = "#FF0000";

步骤4：绘制2D内容对象的尺寸

ctx.fillRect(0,0,100,200);

三、绘制形状

HTML的canvas标签是一个二维网格
绘制图像有起始点的x,y 左边和终止点的x,y坐标

1，绘制直线

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid red;">
你的浏览器不支持canvas
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

在这里插入图片描述

2，绘制圆形

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid red">
你的浏览器不支持canvas
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

在这里插入图片描述

3，绘制多个大小不同的圆

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(20,50,10,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(70,50,20,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(140,50,40,0,2*Math.PI);
ctx.stroke();

在这里插入图片描述

4，canvas的渐变

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid red">
你的浏览器不支持canvas
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变对象
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

// 将渐变对象加入canvas画板
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

在这里插入图片描述

5，径向渐变

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid red">
你的浏览器不支持canvas
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变对象
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"white");
grd.addColorStop(1,"blue");
// 将渐变对象加入canvas画板
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

在这里插入图片描述

梦境工程师-335
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas详解01-绘制基本图形
大雾起了清晨
06-23 3465
既然我们已经设置了 canvas 环境，我们可以深入了解如何在 canvas 上绘制。到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
weixin_68908760的博客
12-19 1023
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
最新发布
Lan_0316的博客
04-20 2427
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
前端教程：Canvas怎样创建画布和绘制图形？
CZ-001的博客
06-13 1268
HTML5提供了一种全新的画布功能，即通过Canvas来让用户在网页中绘制图形、文字、图片等。Canvas表示画布，现实生活中的画布是用来作画的，HTML5中的Canvas与之类似，我们可以称它为“网页中的画布”。默认情况下，Canvas是一块300px乘50px的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。Canvas并不是通过鼠标绘画的，用户需要通过JavaScript来控制画布中的内容，例如添加图片、线条、文字等。本节将讲解如何使用Canvas绘制添加画布和绘制线条。
五分钟学会 Canvas 基础（一）
Tox-boy的博客
07-18 3780
0.前言 最近忙里偷闲，来写的这篇文章，但是中午出去吃个饭，回来因为自己的误操作，把上午的文章全删除了，还没法找回。 小编真的是瞬间觉得整个人生都灰暗了。 心塞，这次真的不想多说什么了。 ————-我是华丽的分割线————– 终于把这篇文章写完了，关于本文，针对读者主要是之前从未接触过 Canvas的同学。当然，你要学 canvas 一定要有 JS 基础啦。 其
Fabricjs一个简单强大的Canvas绘图库快速入门
BADAO_LIUMANG_QIZHI的博客
02-09 3342
场景 Fabric官网 Fabric.js Javascript Canvas Library Fabric.js 是一个可以简化 Canvas 程序编写的库。 Fabric.js 为 Canvas 提供所缺少的对象模型，svg parser，交互和一整套其他不可或缺的工具。 Canvas 提供一个好的画布能力，但是 Api 不够友好。绘制简单图形其实还可以， 不过做一些复杂的图形绘制，编写一些复杂的效果，就不是那么方便了。 Fabric.js 就是为此而开发，它主要就是用对象的方式去
js+canvas简单绘制圆圈的方法
10-22
主要介绍了js+canvas简单绘制圆圈的方法,涉及JavaScript调用canvas组件实现简单图形绘制的相关技巧,需要的朋友可以参考下
canvas鼠标绘制多边形
08-18
使用canvas 鼠标事件绘制多边形，鼠标按下事件，移动事件绘制，双击事件结束绘制。原生js，使用添加事件监听，移除事件监听方法来进行绘制开始和结束。简单小demo
js+canvas简单绘制圆圈的方法.docx
01-19
js+canvas简单绘制圆圈的方法.docx
canvas学习笔记之绘制简单路径
09-22
本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。线段是Canvas最基本的元素之一，可以通过以下三个步骤完成： 1. `moveTo(x, y)`：这个...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景)
一起coding，一起嗨。
08-05 1337
代码】cavans图形绘制。
画线标记html,markline.js——轻量级canvas绘制标记线的库
weixin_42528090的博客
06-20 1097
这段时间要做的是一个数据可视化的小型项目。其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起。很自然的我一开始想的就是采用百度的echarts里的一个地图工具实现这个方案，并且百度给出的方案里默认的样式已经很漂亮了。But，除了基本要求之外，还有一些深层次的要求：1.用户自定义背景图案，2.鼠标触摸上markline时，显示的内容...
cavans绘图步骤
一起coding，一起嗨。
08-05 1344
二、设置cavans上下文 三、绘制图形 四、完整代码
canvas绘制
书香水墨
04-17 529
1 坐标体系 在默认愔况下，Canvas的坐标系统如下图所示，它以canvas的左上角为原点，X坐标向 右方增长，而Y坐标则向下方延伸。下图所画的，是一个具有默认300X 150像素大小的 canvas坐标系。 然而，Canvas的坐标系并不是固定的。正如图2-3中所示，可以对坐标系统进行平移及旋转。 事实上，可以采用如下方式来变换坐标系统： •平移(translate) •旋转(rotate...
H5上传图片并使用canvas制作海报
词语大杂烩
09-30 1万+
马上就要“十一”国庆节了，又恰逢公司已经三周岁了，所以市场部和产品共同策划了一个“正青春，共成长”的主题代言活动，准备在国庆节以及中秋节期间让公司员工和用户为公司代言，于是就有了技术部前端开发人员即本人为公司来开发这个主题代言活动页面。 开发要求： 1、用户可以从手机相册上传图片或拍照上传图片； 2、用户可以输入为公司代言的地点，如：我在：上海； 3、将用户输入的代言地点及活动二维码生成一
canvas绘图
空想少女博客
06-11 1784
canvas绘图 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 标签只是图形容器，必须使用脚本来绘制图形。 anvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 例： fillRect 方法拥有参数 (0,0,150,75)。 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 canvas画小房子 ...
轻量级的Canvas类库zrender使用笔记 ：简单自定义图件开发
cc_fys的博客
12-20 2万+
ECharts，一个纯 Javascript 的图表库，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。当然我们自己可能有些需求，通过修改ECharts或者highcharts的option不能实现，比如说宽度不一致的柱状图图件。可以直接使用Canvas类库zrender开发图件，或者使用snap.svg.js开源项目开发图件。这里写...
canvas绘制一个折线图
阳神
02-15 568
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...
canvas 曲线绘制
06-03
下面是一个简单的例子，绘制一个带有曲线的矩形： ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制矩形 ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150,...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值