<!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画线有毛边是一个在Web前端开发中常见的问题，特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...
例如，可以在画线前调用Canvas.SetPixelFormat函数，选择支持抗锯齿的像素格式。然后，使用Canvas的LineTo等方法进行画线。这种方法可能需要对Windows API有较深入的理解，实现起来相对复杂。 在提供的文件列表中，...
在这个“Canvas画布线条组合动画特效.zip”文件中，很可能包含了一个使用Canvas API创建的线条组合动画示例。这种特效通常用于提升网页的视觉吸引力，尤其在网站头部、背景或交互元素中常见。 首先，让我们深入了解...
学习和掌握Canvas画线不仅有助于创建交互式图表、游戏或者动画，还可以用来构建数据可视化应用，提供用户友好的界面。同时，了解和实践Canvas API也有助于提升Web开发者的前端技能，使其能够更自由地在网页上实现...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
在WPF中实现鼠标在Canvas上画线的功能，可以通过监听鼠标的事件并结合图形绘制API来完成。以下是实现这一功能的关键知识点和步骤： ### 1. 基本概念 - **WPF**：Windows Presentation Foundation是.NET Framework的...
HTML5 Canvas画线段例子，Canvas也是HTML5的优势之一，很多在普通HTML中不能实现的东西，似乎在HTML5中使用Canvas可轻松解决，画线画图功能都超强大，本实例可作为你学习HTML5 Canvas的一个得力参考。
这个教程将带你了解如何利用Canvas进行基本的绘图操作，包括画线、位移和旋转，以及如何巧妙地绘制出五角星图案。无需复杂的数学计算，只需理解Canvas的基本变换原理，你就可以轻松实现这一目标。 首先，Canvas提供...
在Android开发中，Canvas是用于在屏幕上绘制2D图形的核心组件。`Canvas`类提供了丰富的绘图方法，让我们能够在Bitmap或者Surface上绘制线条、形状、文本等元素。在这个"Android画布Canvas之连线动画Demo"中，我们将...
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,...
在JavaScript中，我们可以利用Canvas API来实现各种复杂的图形操作，包括鼠标画图和线程画线。本教程将深入探讨如何使用Canvas进行这些功能。 首先，创建一个Canvas元素非常简单，只需在HTML中添加一个`<canvas>`...
在压缩包文件"lesson2"中，可能包含了进一步的学习材料，如更详细的代码示例、练习或者教学资源，帮助读者深入理解和实践Canvas画渐变线条的技术。 总的来说，学习并掌握Canvas的渐变线条绘制，不仅可以提升网页的...
本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并设置其id以便于在JavaScript中引用。例如： ```html <!DOCTYPE html> ...
canvas 实现点击画线/打点画闭合多边形，靠近元素高亮
首先，我们要了解Canvas的基本用法。Canvas是一个基于矢量图形的元素，通过JavaScript API来操作。在HTML中，我们可以通过`<canvas>`标签创建一个画布，然后通过JavaScript的`document.getElementById('canvas')`...
`beginPath()`开始一个新的路径，`moveTo(x, y)`移动到指定坐标，`lineTo(x, y)`画出从当前点到指定点的线，最后`stroke()`描边完成线条绘制。为了实现波动效果，可以定时改变线条的位置或宽度，或者改变线条的颜色...
在这个“HTML5 Canvas画印章”的主题中，我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性，它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...
在微信小程序中，canvas画布是一个非常重要的组件，它允许开发者进行丰富的图形操作，包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...
本篇文章将详细讲解如何利用Canvas在Android中画曲线图和三角形（多边形），并结合示例代码帮助理解。 首先，我们要明白Canvas的基本用法。Canvas是Android中的一个类，它提供了在Bitmap上绘制图形的方法。通常，...