<!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')`...
在这个“HTML5 Canvas画印章”的主题中,我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性,它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...
`beginPath()`开始一个新的路径,`moveTo(x, y)`移动到指定坐标,`lineTo(x, y)`画出从当前点到指定点的线,最后`stroke()`描边完成线条绘制。为了实现波动效果,可以定时改变线条的位置或宽度,或者改变线条的颜色...
本篇文章将详细讲解如何利用Canvas在Android中画曲线图和三角形(多边形),并结合示例代码帮助理解。 首先,我们要明白Canvas的基本用法。Canvas是Android中的一个类,它提供了在Bitmap上绘制图形的方法。通常,...
当需要清除Canvas画布内容时,有两种主要方法:重置宽或高以及使用`clearRect`方法。 1. 重置宽或高 这种方法简单直接,通过重新设置Canvas的宽度或高度,其内容将被清空。例如: ```javascript var c = ...