`

canvas 画线

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD>

<BODY>

    <canvas id="myCanvans" width="400" height="400"></canvas>
<div>    利用canvas 画出“天地”两个字</div>

</BODY>
<script language="javascript">

var canvas = document.getElementById("myCanvans");
var context = canvas.getContext("2d");

//横
context.beginPath();
context.moveTo(60,40);
context.lineTo(100,40);
context.strokeStyle="black";
context.lineWidth=5;
context.lineCap="round";//端点为圆弧的
context.stroke(  );
//横
context.beginPath();
context.moveTo(40,70);
context.lineTo(120,70);
context.strokeStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();
//撇
context.beginPath();
context.moveTo(80,40);
context.bezierCurveTo(80,70,80,90,20, 140 );
context.lineWidht=5;
context.lineCap="round";
contextStyle="black";
context.stroke();


//捺
context.beginPath();
context.moveTo(80,70);
context.bezierCurveTo(90,100,90,110,140,140);
context.lineWidth=5;
context.lineCap="round";
ccontextStyle="black";
context.stroke();


//地
context.beginPath();
context.moveTo( 200,70 );
context.lineTo( 240,70 );
contextStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(200,140);
context.lineTo(240,120);
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(220,40);
context.lineTo(220,130);
contextStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(250,70);
context.lineTo( 325,70 );
context.stroke();

context.beginPath();
context.moveTo(325,70);
context.lineTo(325,110);
context.stroke();

context.beginPath();
context.moveTo(300,40);
context.lineTo(300,100);
context.stroke();

context.beginPath();
context.moveTo(275,40);
context.lineTo( 275,140);
context.stroke();

context.beginPath();
context.moveTo(275,140);
context.lineTo(345,140);
context.stroke();

context.beginPath();
context.moveTo(345,140);
context.lineTo(345,130);
context.stroke();

</script>

</HTML>
分享到:
评论

相关推荐

    详解Html5 Canvas画线有毛边解决方法

    Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题,特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...

    delphi用canvas画线搞锯齿demo

    例如,可以在画线前调用Canvas.SetPixelFormat函数,选择支持抗锯齿的像素格式。然后,使用Canvas的LineTo等方法进行画线。这种方法可能需要对Windows API有较深入的理解,实现起来相对复杂。 在提供的文件列表中,...

    Canvas画布线条组合动画特效.zip

    在这个“Canvas画布线条组合动画特效.zip”文件中,很可能包含了一个使用Canvas API创建的线条组合动画示例。这种特效通常用于提升网页的视觉吸引力,尤其在网站头部、背景或交互元素中常见。 首先,让我们深入了解...

    canvas画线

    学习和掌握Canvas画线不仅有助于创建交互式图表、游戏或者动画,还可以用来构建数据可视化应用,提供用户友好的界面。同时,了解和实践Canvas API也有助于提升Web开发者的前端技能,使其能够更自由地在网页上实现...

    网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)

    网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...

    WPF用鼠标在Canvas画线

    在WPF中实现鼠标在Canvas上画线的功能,可以通过监听鼠标的事件并结合图形绘制API来完成。以下是实现这一功能的关键知识点和步骤: ### 1. 基本概念 - **WPF**:Windows Presentation Foundation是.NET Framework的...

    Canvas画线段例子.rar

    HTML5 Canvas画线段例子,Canvas也是HTML5的优势之一,很多在普通HTML中不能实现的东西,似乎在HTML5中使用Canvas可轻松解决,画线画图功能都超强大,本实例可作为你学习HTML5 Canvas的一个得力参考。

    使用canvas画线,位移,旋转,绘制五角星。

    这个教程将带你了解如何利用Canvas进行基本的绘图操作,包括画线、位移和旋转,以及如何巧妙地绘制出五角星图案。无需复杂的数学计算,只需理解Canvas的基本变换原理,你就可以轻松实现这一目标。 首先,Canvas提供...

    Android 画布Canvas之连线动画Demo

    在Android开发中,Canvas是用于在屏幕上绘制2D图形的核心组件。`Canvas`类提供了丰富的绘图方法,让我们能够在Bitmap或者Surface上绘制线条、形状、文本等元素。在这个"Android画布Canvas之连线动画Demo"中,我们将...

    html5 Canvas画图教程(5)—canvas里画曲线之arc方法

    在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。 canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,...

    使用Canvas进行鼠标画图和线程画线

    在JavaScript中,我们可以利用Canvas API来实现各种复杂的图形操作,包括鼠标画图和线程画线。本教程将深入探讨如何使用Canvas进行这些功能。 首先,创建一个Canvas元素非常简单,只需在HTML中添加一个`&lt;canvas&gt;`...

    canvas画渐变线条

    在压缩包文件"lesson2"中,可能包含了进一步的学习材料,如更详细的代码示例、练习或者教学资源,帮助读者深入理解和实践Canvas画渐变线条的技术。 总的来说,学习并掌握Canvas的渐变线条绘制,不仅可以提升网页的...

    canvas绘图任意矩形、多边形

    本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先,我们需要在HTML文件中创建一个`&lt;canvas&gt;`元素,并设置其id以便于在JavaScript中引用。例如: ```html &lt;!DOCTYPE html&gt; ...

    canvas 实现点击画线/打点画闭合多边形,靠近元素高亮.html

    canvas 实现点击画线/打点画闭合多边形,靠近元素高亮

    html5 canvas画布实现液体波浪动画效果

    首先,我们要了解Canvas的基本用法。Canvas是一个基于矢量图形的元素,通过JavaScript API来操作。在HTML中,我们可以通过`&lt;canvas&gt;`标签创建一个画布,然后通过JavaScript的`document.getElementById('canvas')`...

    HTML5 Canvas画印章

    在这个“HTML5 Canvas画印章”的主题中,我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性,它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...

    canvas动画 - 背景线条

    `beginPath()`开始一个新的路径,`moveTo(x, y)`移动到指定坐标,`lineTo(x, y)`画出从当前点到指定点的线,最后`stroke()`描边完成线条绘制。为了实现波动效果,可以定时改变线条的位置或宽度,或者改变线条的颜色...

    微信小程序canvas画布实现画笔自由绘制

    在微信小程序中,canvas画布是一个非常重要的组件,它允许开发者进行丰富的图形操作,包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...

    android canvas 画曲线图 画三角形(多边形)

    本篇文章将详细讲解如何利用Canvas在Android中画曲线图和三角形(多边形),并结合示例代码帮助理解。 首先,我们要明白Canvas的基本用法。Canvas是Android中的一个类,它提供了在Bitmap上绘制图形的方法。通常,...

Global site tag (gtag.js) - Google Analytics