Html5 canva画图

最新推荐文章于 2024-05-04 13:12:26 发布
最新推荐文章于 2024-05-04 13:12:26 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52716652
版权

示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>canvas</title>
</head>
<body>
	<!-- 绘制简单的图形 -->
	<!-- 绘制直线 -->
	<canvas id="canvas1" style="border:solid 1px red;" width="200" height="100"></canvas>
	<script type="text/javascript">
		var canvas1 = document.getElementById("canvas1");
		var c1 = canvas1.getContext("2d");
		c1.moveTo(0,0);
		c1.lineTo(200,100);
		c1.stroke();
	</script>
	<!-- 绘制矩形 -->
	<canvas id="canvas2" style="border:solid 1px red;" width="200" height="100"></canvas>
	<script type="text/javascript">
		var canvas2 = document.getElementById("canvas2");		
		var c2 = canvas2.getContext("2d");
		c2.fillStyle = "#ff00ff";
		c2.fillRect(0,0,200,100);
	</script>
	<!-- 绘制圆形 -->
	<canvas id="canvas3" style="border:solid 1px red;" width="200" height="100"></canvas>
	<script type="text/javascript">
		var canvas3 = document.getElementById("canvas3");		
		var c3 = canvas3.getContext("2d");
		c3.fillStyle = "#ff00ff";
		c3.beginPath();
		c3.arc(100,50,50,0,Math.PI*2,true);// context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
		// 参数的意义：x,y分别指圆心的坐标,radius指圆的半径,startAngle和endAngle指开始角度和结束角度，最后一个指是否按照顺时针方向画图
		c3.closePath();
		c3.fill();
	</script>
	<!-- 绘制三角形 -->
	<canvas id="canvas4" style="border:solid 1px red;" width="200" height="100"></canvas>
	<script type="text/javascript">
		var canvas4 = document.getElementById("canvas4");		
		var c4 = canvas4.getContext("2d");
		c4.fillStyle = "red";
		c4.beginPath();
		c4.moveTo(0,0);
		c4.lineTo(150,0);
		c4.lineTo(0,100);
		c4.fill();
	</script>
	<!-- 绘制空心三角形 -->
	<canvas id="canvas5" style="border:solid 1px red;" width="200" height="100"></canvas>
	<script type="text/javascript">
		var canvas5 = document.getElementById("canvas5");		
		var c5 = canvas5.getContext("2d");
		c5.strokeStyle = "red";
		c5.beginPath();
		c5.moveTo(0,0);
		c5.lineTo(150,0);
		c5.lineTo(0,100);
		c5.closePath();
		c5.stroke();
	</script>
	<!-- 清空画布：context.clearRect(x1,y1,x2,y2); -->
	<!-- 绘制二次方贝塞尔曲线 -->
    <canvas id="canvas6" style="border:solid 1px red;" width="300" height="200"></canvas>
	<script type="text/javascript">
		var canvas6 = document.getElementById("canvas6");		
		var c6 = canvas6.getContext("2d");
		c6.strokeStyle = "dark";
		c6.beginPath();
		c6.moveTo(0,200);
		c6.quadraticCurveTo(75,50,300,200);
		c6.stroke();
		c6.globalCompositeOperation="source-over";
		c6.strokeStyle="#ff00ff";
		c6.beginPath();
		c6.moveTo(75,50);
		c6.lineTo(0,200);
		c6.moveTo(75,50);
		c6.lineTo(300,200);
		c6.stroke();
	</script>
	<!-- 绘制三次方的贝塞尔曲线 -->
	<canvas id="canvas7" style="border:solid 1px red;" width="300" height="200"></canvas>
	<script type="text/javascript">
		var canvas7 = document.getElementById("canvas7");		
		var c7 = canvas7.getContext("2d");
		c7.strokeStyle="dark";
		c7.beginPath();
		c7.moveTo(0,200);
		c7.bezierCurveTo(25,50,75,50,300,200);
		c7.stroke();
		c7.globalCompositeOperation="source-over";
		c7.strokeStyle = "#ff00ff";
		c7.beginPath();
		c7.moveTo(25,50);
		c7.lineTo(0,200);
		c7.moveTo(75,50);
		c7.lineTo(300,200);
		c7.stroke();
	</script>
</body>
</html>


xiaopengyaonixi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript基础——使用Canvas绘图
10-21
主要介绍了JavaScript基础——使用Canvas绘图，Canvas也真的跟现实生活中的画布非常相似，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
html5——canva 绘图1简单图形
weixin_30469895的博客
01-04 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{background: #131115;} #c1{bac...
2024年最全canvas学习（html5）画画_canva画画html(1)，2024年最新Python面试项目经验
最新发布
m0_61042081的博客
05-04 916
Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。学习Python常用的开发软件都在这里了，给大家节省了很多时间。④　Python基础入门、爬虫、web开发、大数据分析方面的视频（适合小白学习）⑤ Python学习路线图（告别不入流的学习）②　Python标准库资料（最全中文版）
HTML中canvas的使用
qq_39592670的博客
06-22 539
使用canvas时，在HTML中注意插入canvas的位置将&lt;script&gt;方法，放在body&lt;canvas&gt;&lt;/cancas&gt; 下面因为chrome下需要文档载入完成后才能获得canvas对象2.在js中写对应代码（1）绘制矩形边框第一种方法var cavl=document.getElementById('mr-cav'); var cav=cavl.get...
html5 Canvas 基本特性
weixin_30912051的博客
01-05 176
html5 Canvas 介绍 canvas的基本属性与方法：width,height,getContext()等； 通过width与height来获取和设置当前canvas的宽度、高度； 通过getContext()方法来获取当前画布的绘图环境（context）； context=canvas.getContext("2d"); context包含了我们需要的，在canvas上绘图的所...
HTML5的优点
publicYY123的专栏
10-25 1881
网络标准 HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。 多设备跨平台 用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HT
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
09-28
在开发Web应用时，我们经常使用HTML5的Canvas API来绘制复杂的图形和交互式界面。然而，Canvas元素本身并不直接支持鼠标事件监听，这给在Canvas上实现交互带来了一定的困难。为了解决这个问题，我们可以借助第三方库...
canva画图代码
08-14
总结来说，"canva画图代码"涉及到的关键知识点有： 1. HTML5 Canvas的使用，包括创建Canvas元素和获取2D渲染上下文。 2. JavaScript的Image对象用于图片加载，并在`onload`事件中进行绘制。 3. 图片的缩放算法，以...
一个基于html5 canva创建的树控件，这个控件可以通过json和js进行控制操作.zip
02-14
"一个基于html5 canva创建的树控件，这个控件可以通过json和js进行控制操作.zip" 提供的资源是一个使用HTML5 Canvas技术构建的树形控件，它允许用户通过JSON数据结构和JavaScript进行交互。树控件在网页应用中非常...
HTML5结合Canva实现的粒子数字随机变化实例动画特效源码.zip
11-04
在本实例中，我们将探讨如何利用HTML5与Canva库来创建一个粒子数字随机变化的动画特效。 Canva是一个JavaScript库，专门用于在HTML5画布（canvas）上进行图形绘制。它提供了高级的绘图功能，让开发者能够轻松地创建...
html5_canva_英雄游戏hero
02-04
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"英雄游戏hero"显然是一款利用HTML5 Canvas技术开发的在线游戏，旨在提供一种新颖、引人入胜的游戏...
JavaScript的Canvas绘图
不睡觉的怪叔叔的博客
12-04 661
目录 一、Canvas简介 二、Canvas基本用法 三、填充和描边 四、绘制矩形 五、绘制路径 5.1、绘制线段 5.2、绘制三角形 5.3、绘制圆弧 5.4、绘制贝塞尔曲线 5.5、线条样式 六、绘制文本 七、绘制图像 ​ 八、模式 ​ 九、使用图像数据 十、阴影 一、Canvas简介     &lt;canvas&gt;元素是HTML5新增的，一个可以使...
HTML5之canvas详解
EmotionComputer
02-13 3922
对于HTML5的内容，由于目前并不是所有的浏览器都兼容，所以我们首先需要判断你所用的浏览器是否支持canvas标签，判断方法如下: 你的浏览器不支持canvas标签 如果你的浏览器支持canvas标签，那么就不会显示那句话，否则就会显示出来。 1.定义canvas标签 2.
HTML5画布画图实例
GameLife_lch的专栏
06-15 1312
你的浏览器不支持HTML5 var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("face");     ctx.drawImage(img,0,0); 源码下载
前端canvas基础
冯静的博客
02-10 3418
什么是canvas(画布） 是html5新增的元素，可用于通过使用js的脚本来绘制图形，创建动画。canvas最早由Apple引入Webkit。 canvas使用入门 使用标签来定义一个canvas元素。例如&amp;lt;canvas id=&quot;test&quot;&amp;gt;&amp;lt;/canvas&amp;gt;。canvas元素默认具有高度：width:300px;height:150px 使用js代码
使用canvas实现一个小小的截图功能
Sallywa的博客
08-24 5764
???? 效果图 话不多说，先看下效果 ???? 实现思路 ???? 难点 截图动画效果 计算截取区域 生成&获得截取区域图片 ???? 完整代码 1. html部分 import React, { ReactElement, useEffect, useRef, useState } from 'react' import './index.less' export default () => { const clipAreaWrap = useRef(null) // 截图区
前端可视化——Canvas
mapbar_front的博客
03-12 7888
Canvas 基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 1、canvas元素替换内容。 使用文本的方式 <canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas> 使用图片的方式 <canvas><img src=...
前端 Canvas基础 （一）【基本图形】
前端、python爱好者
07-07 4359
canvas [ˈkænvəs] ：画布 这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下
强大的画图标签——Canvas（基础篇）
热门推荐
不止会New的博客
05-23 1万+
1. 基础篇 1.1. 什么是 Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现. canvas 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 1.1.1. canvas 的基本用法...
html 画图软件有哪些
04-05
它本身并不是一种画图软件，但是可以通过其他画图软件生成的图像文件在HTML中进行嵌入和显示。以下是一些常见的画图软件： 1. Adobe Photoshop 2. Adobe Illustrator 3. Sketch 4. Figma 5. CorelDRAW 6. Inkscape ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值