HTML5 canvas 绘制线条方法

最新推荐文章于 2024-06-03 21:34:00 发布
最新推荐文章于 2024-06-03 21:34:00 发布
阅读量7.6k 收藏 1
点赞数
分类专栏： 示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39205291/article/details/80610849
版权
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;margin-left:40%;margin-top:20%"></canvas>




<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置结束坐标
ctx.lineTo(200,100);
//绘制线条
ctx.stroke();
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="red";
//设置开始坐标
ctx.moveTo(20,30);
//设置结束坐标
ctx.lineTo(100,30);
//context.lineCap="butt|round|square"; 向两端线条添加 默认/圆形/方形的边缘
ctx.lineCap="round";
//context.lineJoin="bevel|round|miter"; 两条线终点相交时的拐角 默认(斜角)/圆角/尖角
ctx.lineJoin="miter";
//设置线条宽度
ctx.lineWidth=10;
//绘制线条
ctx.stroke();
//设置填充颜色
ctx.fillStyle="#0000ff";
//设置字体样式
ctx.font="30px Arial";
//绘制实心字体
ctx.fillText("Hello World",10,50);
//绘制空心字体




</script>
</body>

</html>


用三个点画一条折线

ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置中间坐标
ctx.lineTo(100,50);
//设置结束坐标
ctx.lineTo(200,60);
//绘制线条

ctx.stroke();



绘制一条虚线


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var xp = 4;//最小长度
var yp = 2;//最小长度


var beginx = 0;//开始横坐标
var beginy = 0;//开始纵坐标
var beginz = 4;//开始第一个点横坐标
var beginw = 2;//开始第一个点纵坐标
var times = 0;
drows(beginx,beginy,beginz,beginw);
function drows(x,y,z,w){
if(x+xp<200){
ctx.lineWidth=2;
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(x,y);
//设置中间坐标
ctx.lineTo(z,w);
//设置结束坐标
ctx.stroke();
x=x+xp;
y=y+yp;
z=z+xp;
w=w+yp;
times++;

if(times%2==0){

}else{
x=x+xp;
y=y+yp;
z=z+xp;
w=w+yp;
times++;
}
drows(x,y,z,w);

}

}


设置两条线的转角


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


//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置结束坐标
ctx.lineTo(50,60);
//设置线条宽度
ctx.lineTo(200,0);
ctx.lineWidth=10;


ctx.lineJoin="miter";


//绘制线条

ctx.stroke();





绘制一个圆或者圆点

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
qq_39205291
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 使用canvas画线
01-19 4028
杭州驾校网 首先先看一下全部得代码： <script> function drawDiagonal() { // 取得 canvas 元素及其绘图上下文 var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); //用绝对坐标来创建一条路...
html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
weixin_35911805的博客
07-20 935
如果你还不知道canvas是什么，可以看看.在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在canvas中也是如此。在开始之前我们先拿出画布和画笔：复制代码代码如下:var cvs = document.getelementbyid('cvs'); //画布var ctx = cvs.getcontext('2d'); // 画笔我们画画的时候，落笔点是不固定的，随时都会变。ca...
HTML5中Canvas画线技巧大全
Sayesan的专栏
08-28 6106
我们都知道在HTML5中最重要的亮点之一就是Canvas标签，他主要用途就是绘画，那么说到绘画技术，肯定就是要从画线开始，那么怎样使用canvas画线，canvas画线技巧是什么，下面为大家讲解canvas画线技巧； 首先我们肯定要先搭建一个画线“舞台”。 html>        Canvas画线技巧     var myCanvas = document.getEl
HTML5 Canvas 绘图教程一
最新发布
一名全栈开发工程师
06-03 777
HTML5 的canvas元素提供了一种在网页上进行绘图的方式，通过 JavaScript，可以绘制图形、处理图像甚至创建动画和游戏。
学习Canvas基础-画直线
qq_67983277的博客
11-14 1666
学习Canvas基础-画直线
html5 canvas绘制图形和线段
啨天的博客
08-08 292
canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！通常来说网格中的一个单元相当于canvas元素中的一像素。想了解更全面的canvas API可以点击右侧: canvas简介及常用API。..
HTML5 canvas绘图
粥要熬。
09-09 482
canvas绘制图形canvas元素的基础知识在页面上放置一个canvas元素，就相当于在页面放置了一块画布，可以在其中描绘图形。事实上，canvas元素只是一个无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。在页面放置canvas元素首先要指定的是ID、width、height三个属性<canvas id="canvas" width="400" height="300" /
HTML5 canvas方法总结
KIoIK的博客
09-13 326
什么是canvas canvas是HTML中新增加的标签，可以使用它在页面绘制图形等，值得注意的是canvas本身只相当于一张画布，我们只是在它上面绘画。 canvas的高宽 canvas并不需要我们去设置它的高宽，它默认的宽带和高度是300px150px 如果想要修改高宽，值得注意的是不能直接用css的方式去修改它的高宽。这是因为canvas相当于一张图片，如果通过css的方式设置它的高宽，会导致canvas默认的300150高宽被强行拉伸。 所以一般这样设置canvas的高宽 let myCanvas
HTML5 Canvas鼠标绘制线条特效
06-24
这个"HTML5 Canvas鼠标绘制线条特效"是利用Canvas API创建的一种互动性较强的动画效果，用户可以通过鼠标移动来实时绘制出线条，形成一种动态的光标跟随效果。 在Canvas上实现这种效果，主要涉及以下几个关键知识点...
html5 Canvas绘制线条 closePath()实例代码
09-28
在这个实例中，我们关注的是如何使用`closePath()`方法来绘制线条。 `closePath()`是Canvas 2D渲染上下文中的一个关键方法，它的主要作用是将当前路径封闭成一个完整的形状。当你在Canvas上绘制路径时，通常会用到`...
HTML5 Canvas五彩线条动画特效
07-24
"HTML5 Canvas五彩线条动画特效"是一个利用Canvas API实现的创新视觉效果，通过在画布上绘制彩色光线条，营造出一种动感十足、色彩斑斓的场景，常常用于网站背景或互动元素，提升用户体验。 首先，我们要理解Canvas...
html5 canvas绘制线条组合几何体动画特效
06-11
在这个“html5 canvas绘制线条组合几何体动画特效”中，我们将会探讨如何利用Canvas API来创建2D彩色线条花环几何体的变换动画。 首先，要创建任何Canvas元素，你需要在HTML中添加一个`<canvas>`标签，并为其设置id...
HTML5 canvas基本绘图之绘制线条
09-27
本文将详细介绍HTML5 `canvas`的基本绘图功能，特别是如何绘制线条。 首先，`<canvas>`标签在HTML5中扮演着画布的角色，用于承载图形。它的高度和宽度可以通过属性`height`和`width`来设定。与其他HTML标签一样，`...
HTML5 canvas画布画直线
前端江湖
03-20 387
HTML5新元素之一 canvas，定义使用 JavaScript 的图像绘制，只需要简单几步就能用js在canvas中画图。为了让canvas元素更直观地显示出来，我们加上边框样式。在html页面声明canvas标签。
html-canvas-绘制简单线条
ZhanShenvsDiHuang的博客
04-20 1399
canvas-画简单线条
h5 Canvas线段的绘制
suwu150
02-27 1610
在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。 通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法 创建线条 const canvas = document.getElementByI...
canvas基础：绘制线段，绘制多边形
大剑师兰特的GIS世界
11-27 742
专栏提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
HTml5 Canvas 整理笔记之画线
王者之峰
04-11 9933
1.画线1.1在画之前先“配置好画布”（以后不再提及）实例介绍//先设置一点canvas的style里面有属性使其有边框（好观察），居中（display:block，要先把canvas设置成块级元素，margin的设置中央才有效）
Html5中canvas画布绘制线段
qq_51066068的博客
04-25 520
绘制线段 moveTo(x,y): x,y:线段的起点坐标 lineTo(x,y) x,y:线段的终点坐标 cx.stroke();//开始绘制 //fill():不能使用 lineWidth=number;//线段粗细 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值