用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法
发布时间:2020-08-29 11:24:23
来源:亿速云
阅读:96
作者:小新
这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
使用HTML Canvas绘制线条,我们需要用到的是Canvas上下文的MoveTo()和LineTo()方法,下面我们就来看看具体的内容。
我们先来看一个示例
代码如下
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
}
说明:function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
}
分析
上述的这个JavaScript代码是绘制代码,使用document.getElementById()方法获取Canvas上下文,并调用Canvas对象上的getContext()方法以获取Canvas上下文,调用上下文的beginPath()方法来开始路径,使用moveTo()将笔移动到指定位置,并将线条绘制到lineTo()方法指定的位置,通过调用stroke()方法执行绘图。
运行结果
执行上述HTML文件,将会显示如下效果
接着我们再来看一个示例
代码如下
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 60);
context.lineTo(240, 90);
context.stroke();
context.beginPath();
context.moveTo(120, 75);
context.lineTo(260, 120);
context.stroke();
context.beginPath();
context.moveTo(160, 100);
context.lineTo(200, 140);
context.lineWidth = "3";
context.stroke();
context.beginPath();
context.moveTo(200, 40);
context.lineTo(360, 120);
context.strokeStyle = '#00C080';
context.stroke();
context.beginPath();
context.moveTo(40, 20);
context.lineTo(80, 160);
context.strokeStyle = '#C00080';
context.lineWidth = "1";
context.stroke();
context.beginPath();
context.moveTo(400, 10);
context.lineTo(380, 200);
context.strokeStyle = "rgb(96, 96, 225)";
context.stroke();
}
说明:
在上面的代码中,我们改变了线条的粗细和颜色。
要更改线条的粗细,请在Canvas的Context的lineWidth属性中设置线条的粗细;要更改线条颜色,请在Context的strokeStyle属性中指定绘图颜色。对于颜色规范,可以使用诸如十六进制格式,“RGB”格式,“blue”,“red”等颜色名称;此外,只要设置了一次值,即使使用beginPath()创建新路径,也不会初始化设置的值。
例context.beginPath();
context.moveTo(160, 100);
context.lineTo(200, 140);
context.lineWidth = "3";
context.stroke();
context.beginPath();
context.moveTo(200, 40);
context.lineTo(360, 120);
context.strokeStyle = '#00C080';
context.stroke();
上述代码的情况下,由于第二条线没有指定lineWidth,因此可以利用之前指定的lineWidth的值。
运行结果
感谢你能够认真阅读完这篇文章,希望小编分享使用HTML5 canvas绘制线条的方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
用html5做一条线,使用HTML5 canvas绘制线条的方法相关推荐
- 用html5做一条线,带徒手画线条的HTML5画布
创建基于画布的绘图应用程序. 绘图应用程序没有那么多.当按钮在鼠标位置向下绘制时,听鼠标. 如果你想拥有一个响应式画布并且还包含undos等等,那么你需要从更复杂的层面开始. 绘图和显示. 首先,您应 ...
- 用html制作阴影效果,使用HTML5 Canvas绘制阴影效果的方法
这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影 边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下 创建阴影效果需要操作以下4个属性: ...
- html5绘制随机五角星_HTML5 canvas绘制五角星的方法
这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTM ...
- HTML5做手机站页面字体显示很小的解决方法
HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...
- Python基本图形绘制详解(给你一条线,便能绘制整个世界)
用Python基本图形绘制一般都是从画一条小蛇入手. Python小蛇绘制问题是各类图像绘制问题的代表,清楚理解这16行代码便能掌握Python基本绘图方法,举一反三,可绘制玫瑰花,五角星,国旗等等任 ...
- 用html5做淡出淡入效果,在Html5 canvas中淡入淡出
我已经有了一个图像的画布,我想淡入淡出图像不断.我已经使用上面的代码:在Html5 canvas中淡入淡出 var canvas; var context; var ga = 0.0; var tim ...
- html5做一个展示页面,基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- html5中矩形条怎么写,html5中往矩形中贴图片
分两步: 1. 画布大小就是矩形的大小 aaa 2. 画到矩形上的代码 var IMG_SRC = "./1.jpg"; function drawRect() { var can ...
- html5做密码形式的游戏,html5仿支付宝密码框的实现代码
废话不多说了,直接给大家贴代码了,具体代码所示: 仿支付宝密码框-移动端测 *{ margin: 0; padding: 0; } body { padding: 50px; } .clearfix: ...
最新文章
- Nginx查看并发连接
- sort (STL)
- mysql 查询优化 Explain关键字 高性能mysql笔记
- 荣耀v30pro搭载鸿蒙吗,荣耀麒麟30pro+,可以搭载鸿蒙的顶级荣耀,你买了吗?...
- eclipse build慢问题
- 值传递和引用传递_C++ 中的值传递和引用传递
- c语言程序设计50例(经典收藏),C语言程序设计50例(经典收藏)
- python歌词统计单词词频_python词频统计
- IM 产品设计思考(3) - 呼叫中心及IVR
- 8类网线利弊_浅析网线8芯线各自的作用
- Android Intent的详细解析以及用法
- 新一代至强CPU加速GBase 8a MPP,GBase GCDW云数据仓库助力行业迎接数字化转型新挑战
- 温度传感器DS18B20的相关介绍以及基于MSP430的驱动程序(附代码)
- ReadHub源码阅读笔记(一)
- Pycharm中运行yolov5-pytorch出现错误:AttributeError: ‘Hardswish‘ object has no attribute ‘inplace‘
- 我的Python笔记02
- Kubernetes 三大探针及探针方式
- Thrill: 基于C++的高性能分布式批处理算法
- 如何oracle调试存储过程
- 信息安全快讯丨夏末秋初,正是阅读好时光
热门文章
- iOS打电话发短信发邮件总结
- 将DataTable 存到一个集合当中
- SQL Server中表锁定的原理及解锁演示
- 引起LC.exe exited with code -1的两个场景
- C#中如何复制窗体到另一个项目
- c#中invoke和beginvoke的区别
- C++中重载与重写函数区别及虚函数(转载)
- IOS开发基础之音频工具类封装AVAudioPlayer
- vs2013和mysql连接_安装VS2013后与数据库的连接问题
- python比较两个数的和_Python中的is和==比较两个对象的两种方法