HTML5——Canvas_02之【moveTo与lineTo】

最新推荐文章于 2023-01-13 22:23:18 发布
最新推荐文章于 2023-01-13 22:23:18 发布
阅读量504 收藏
点赞数
分类专栏： Html5 Canvas 文章标签： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superstatus/article/details/80566078
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >

< head >
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
< title >moveTo与lineTo </ title >
< script >
function draw( id){
var canvas= document. getElementById( id); //获取ID
var context= canvas. getContext( "2d"); //声明这是个2d画面
context. fillStyle= "#eeeeef"; //2d画面颜色（填充颜色）
context. fillRect( 0, 0, 300, 400); //用矩形填充 宽300，高400

var dx= 150;
var dy= 150;
var s= 100;

context. beginPath(); //开始画
context. fillStyle= "rgb(100,255,100)"; //填充矩形颜色
context. strokeStyle= "rgb(0,0,100)"; //填充边框颜色
var x= Math. sin( 0); //正弦
var y= Math. cos( 0); //余弦
var dig= Math.PI/ 15* 11; //半径
for( var i= 0; i< 30; i++)
{
var x= Math. sin( i* dig);
var y= Math. cos( i* dig);
context. lineTo( dx+ x* s, dy+ y* s); //lineTo是画线，线的长度
}
//关闭canvas
context. closePath();
//canvas开始填充
context. fill();
//canvas开始画
context. stroke();


}
</ script >
</ head >

< body onload= "draw(" canvas ");" >
< canvas id= "canvas" width= "300" height= "400" ></ canvas >
</ body >

</ html >
Superstatus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础_使用moveTo与lineTo路径绘制火柴人
m0_72882572的博客
12-20 617
使用moveTo与lineTo路径绘制火柴人 接下来看一下除了arc方法以外，其他使用路径绘制图形时会使用到的方法。 　moveTo(x,y)：不绘制，只是将当前位置移动到新的目标坐标（x,y）。 　lineTo(x,y)：不仅将当前位置移动到新的目标坐标（x,y），而且在两个坐标之间画一条直线。 简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要注意的是，不管调用它们哪一个，都不会真正画出图形，因为还没有调
canvas入门——线段绘制
astak3的博客
09-08 953
moveTo、lineTo 使用canvas绘制一条线段，默认已经拿到canvas的上下文context 绘制一条直线需要使用context提供的moveTo、lineTo方法 moveTo是线段的起点，lineTo是线段下一个点，最后使用stroke进行描边。如下代码 context.moveTo(100,100) context.lineTo(200,200) context.stroke()...
Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径，fillText() 绘制填色的文本
蚩尤后裔-汪茂雄
12-07 5864
目录 直线路径 API 方法 绘制路径编码示例 canvas fillText() 填充文本 直线路径 API 方法 beginPath() 方法 beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示...
canvas笔记-lineTo()与moveTo()的区别
IT1995的博客
05-30 6425
首先来看下如下代码： let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.lineWidth = 10; context.lineTo(10, 10); context.l
4、使用 lineTo 和 moveTo 绘制路径
大宇的专栏
06-02 2764
canvas 上下文总是持有一条唯一的当前路径。一条路径可以拥有零条或多条子路径，每条子路径由一系列通过直线或曲线相连的点构成。 如果一条路径的终点和起点间首位相连，这条路径成为闭合路径。 调用 context.beginPath() 即可表示你想开始绘制一条新的路径。 一条路径只不过是构成一条线的一系列坐标位置，为了将它渲染到 canvas 上，需要调用 c...
canvas中MoveTo新解
weixin_49665042的博客
12-01 1222
在canvas中，如果想要画多条不是依次连接的线的时候，只有多次书写beginPath()，这个方法，因此为了使少使用beginPath这个方法，可以书写多个MoveTo，每一次的MoveTo都相当于开始一个新的下笔点，然后在lineTo即可画出多个不是依次连接的线，还有就是如果是依次连接的线，但是每一段的颜色粗细都不同时，可以使用该方法，或者使用beginPath这个方法，多次书写MoveTo与lineTo。但是也要书写多次strokeStyle与lineWidth，因此可以考虑使用save()这个方法，
HTML5_Canvas_Cheat_Sheet.zip
07-02
3. **绘图路径**：`beginPath()`, `moveTo()`, `lineTo()`, `arc()`, `rect()`等方法构建绘图路径。路径可以用来填充或描边。 4. **颜色与样式**：`fillStyle`和`strokeStyle`用于设定填充和描边的颜色，可以是纯色...
HTML5_canvas_Web.rar_canvas_canvas html5_canvas 绘图_html5_html5 c
09-19
这个压缩包“HTML5_canvas_Web.rar”显然包含了关于如何利用HTML5的canvas元素进行Web绘图的资源，其中的核心文件是“使用 HTML5 canvas 进行 Web 绘图.mht”。 Canvas API 提供了一系列的JavaScript方法，使得开发...
HTML5代码集合_html5_html5canvas_
09-30
一旦获取到2D渲染上下文，就可以调用一系列的绘图方法，如`fillRect(x, y, width, height)`画矩形，`strokeRect(x, y, width, height)`画边框，`beginPath()`开始一条路径，`moveTo(x, y)`移动到某个点，`lineTo(x, ...
Painter_Report_html5canvas_echarts_css_
09-30
通过JavaScript，我们可以直接操作Canvas元素的2D渲染上下文，调用各种方法如`beginPath()`、`moveTo()`、`lineTo()`、`stroke()`等来绘制线条、曲线、形状，甚至复杂的图像。在这个项目中，"线条粗细调整"功能就是...
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
要在Canvas上绘制直线，我们需要使用`moveTo()`方法设置起点，然后使用`lineTo()`方法指定终点。在示例中，我们首先获取Canvas元素，然后获取其2D渲染上下文，接着设置线宽和颜色，最后调用`stroke()`方法绘制线条...
CSS——canvas 中 lineTo()与moveTo()的区别
qq_43201350的博客
02-08 678
使用方式： context.moveTo(10, 10); context.lineTo(80, 10); moveTo： 移动到指定位置，然后使用lineTo去画。 lineTo：直接画到指定的位置。当没设置moveTo的时候，这个位置就为空，这样话lineTo的第一个点就没有东西，就是第一个图。 ......
html5的canvas绘制线条，moveTo和lineTo详解
王业楼的个人博客
11-08 6218
今天在看html5，里面新增的属性有一个canvas，它相当于一个画布你可以用js在里面画你想要的效果！我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚，尤其是moveTo和lineTo函数没有说的很明白！所以特地在这里与新手朋友分享一下我的理解！     一、w3c里面的代码和实现效果     手册的代码是这样的
HTML5中canvas的lineTo和moveTo的用法
sxj的专栏
11-20 9414
function draw2D(){ var canvas=document.getElementById("canvas-fram"); if(canvas==undefined){ return ; } canvas.width=1000; //设置画布的宽
从moveTo到lineTo，画出Canvas的第一条线
weixin_45785873的博客
04-20 1331
Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案 Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
Canvas——路径使用的一些感悟
小狼驿站
05-06 3423
路径使用的一些总结： moveTo()和lineTo()函数都是用来移动点，绘制路径的函数，绘制完成后，调用closePath()函数，它会创建一条由描点的终点通向起点的虚拟路径，闭合整个路径，然后调用stroke()函数进行描边，最后可以用fill()函数来填充样式。 简单的实例代码如下： charset="utf-8">   type="text/javascript"
HTML5 Canvas基础概念（一）
读心悦
02-15 742
Canvas基础知识：Canvas属于行内元素，使用Canvas绘制图形步骤： 1、获取Canvas对象 2、获取上下文环境对象context。 3、开始绘制图形 在Canvas对象中常用属性 属性 说明 width Canvas的宽度 height Canvas的高度 Canvas常用的方法 属性 说明 getContext("2d") ...
canvas：基础知识【直线和矩形】
读心悦
01-13 1030
canvas，就是画布，是HTML5和核心技术之一，结合JavaScript，可以绘制各种各样的图形，比如矩形、曲线、圆形等等。另外，canvas可以绘制图表、动画效果、游戏开发。基本图形汇中有直线和曲线。常见的直线图形是直线、矩形和多边形。
MoveTo和LineTo函数的意思
热门推荐
史D芬周
05-26 1万+
MoveTo和LineTo函数的意思 这是个画线函数， moveto是移动到某个坐标，lineto是从当前坐标， 移动的某个坐标连接早当前坐标。这两个函数加起来就是画一条直线。 posted @ 2018-05-26 20:15 史D芬周 阅读(...) 评论(...) 编辑 收藏...
canvas moveTo和lineTo绘制路径绑定事件
最新发布
06-06
1. 创建路径：使用`moveTo()`方法设置路径的起点，并使用`lineTo()`方法绘制路径。 2. 绑定事件：使用`addEventListener()`方法为canvas元素绑定事件，例如`click`、`mousemove`或`mousedown`。 3. 检查点击位置：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值