`
vawe666
  • 浏览: 43034 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5-canvas画一条直线

 
阅读更多

<!--canvas 标签-->

<canvas width="500" height="800"    id="canvas">
</canvas>

<!--获取画布DOM  还不可以操作-->
var canvas=document.getElementById('canvas');

<!--   //设置绘图环境-->

var cxt=canvas.getContext('2d');





//开启新路径
cxt.beginPath();
//设定画笔的宽度
cxt.lineWidth=10;
//设置画笔的颜色
cxt.strokeStyle="#ff9900";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的方式
cxt.lineTo(100,20);
//画线
cxt.stroke();
//封闭路径
cxt.closePath();

分享到:
评论

相关推荐

    html5-canvas-loader.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上直接绘制图形,从而创建交互式的、动态的视觉效果。这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们...

    canvas画板工具 uni-modules、画板、canvas、签名、电子签名、简约风、万能、免费、支持横竖屏

    canvas画板工具是一种基于HTML5 canvas元素开发的交互式绘图工具,广泛应用于网页和移动应用中,尤其在uni-app框架下。它提供了丰富的功能,包括绘制曲线、直线、圆形和方形,以及进行清空、撤消、橡皮擦擦除、调整...

    html5-canvas-瀑布特效.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5-canvas-瀑布特效.zip”压缩包中,包含了一个使用HTML5 Canvas技术实现的逼真流动瀑布动画特效...

    html5 canvas五彩发光线条游走散开动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉体验。在这个“五彩发光线条游走散开动画特效”中,我们主要涉及了Canvas的一些核心概念和技术,包括路径绘制、...

    canvas特效-圆点运动连线

    如果两点间的距离小于特定值,我们就使用`lineTo()`方法在画布上画出一条线。同时,可以添加一些动画效果,让圆点在画布上随机移动,使得连线效果更加生动: ```javascript function drawConnections() { ctx....

    HTML5 canvas爱心表白动画.zip

    爱心的形状通常由两个半圆和一条直线构成,可以用arc()方法画出半圆,moveTo()和lineTo()方法画出直线。在动画中,爱心可能需要动态生成,所以需要计算每个爱心的位置、大小以及旋转角度。这些参数可以通过时间戳、...

    html5 canvas线条发散时光穿梭动画特效

    Canvas API提供了一系列的方法,如`context.beginPath()`开始一条路径,`context.moveTo(x, y)`移动到指定坐标,`context.lineTo(x, y)`绘制直线到另一个坐标,以及`context.stroke()`绘制当前路径。在这个特效中,...

    微信小程序canvas实现直线自由移动

    Canvas是一个HTML5元素,通过JavaScript来绘制2D图形。在微信小程序中,我们可以使用`&lt;canvas&gt;`标签来引入Canvas,并通过调用其context对象提供的方法进行绘图。例如,`wx.createSelectorQuery()`可以获取Canvas组件...

    html5 canvas 教程 pdf中文版 天涯浪子

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖任何外部插件。这个“HTML5 Canvas 教程 pdf中文版 天涯浪子”资源显然是一份专为初学者和进阶者设计的指南,旨在帮助他们...

    HTML5 canvas爱心表白动画

    在这个表白动画中,爱心通常会用到arc方法来绘制心形的两个半圆和一条直线连接。通过调整坐标和参数,可以创造出各种形状和大小的爱心。 同时,为了使动画更加生动,可能还会利用Canvas的透明度控制(globalAlpha...

    canvas实现的画板

    HTML5的Canvas是一个强大的绘图接口,它允许开发者在网页上进行动态图形绘制。这个"canvas实现的画板"项目,就是利用了HTML5的Canvas元素及其API来创建一个交互式的绘画工具。用户可以通过这个画板画出直线、矩形和...

    HTML5 Canvas贝塞尔曲线动画

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,而贝塞尔曲线则是Canvas中一种非常重要的曲线绘制方法,常用于创建平滑的线条动画效果。这篇博客“HTML5 Canvas贝塞尔曲线动画”...

    html5 canvas 制作流程图 EaselJS

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上直接绘制图形,从而创建出丰富的交互式用户体验。EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得...

    html5使用canvas画一条线

    `moveTo`方法用于设置画笔的当前位置,而`lineTo`方法则会从当前位置画一条直线到指定的坐标。假设我们要从(20, 20)开始,画到(100, 20),则代码如下: ```javascript cxt.moveTo(20, 20); cxt.lineTo(100, 20); ``...

    HTML5应用开发技术-canvas基本语法.pptx

    例如,绘制一条直线: ```javascript ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.stroke(); ``` 这里,`beginPath()`开始一个新的路径,`moveTo(x, y)`移动到指定的坐标,`lineTo(x, y)`画...

    html5绘图Canvas线条动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5绘图Canvas线条动画特效”的主题中,我们将深入探讨Canvas API,了解如何利用它来创建引人入胜...

    HTML5 canvas多功能涂鸦画板绘图代码.zip

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上进行动态图形绘制的能力。这个"HTML5 canvas多功能涂鸦画板绘图代码"项目利用了canvas和jQuery库来实现一个功能丰富的在线绘图应用程序。以下是关于...

    HTML5 Canvas线条爱心动画特效.zip

    HTML5 Canvas是现代网页开发中的一个关键特性,它允许开发者在网页上进行动态图形绘制,提供了丰富的2D渲染能力。这个“HTML5 Canvas线条爱心动画特效”是一个利用Canvas API实现的创新性应用,旨在为网页增添浪漫且...

Global site tag (gtag.js) - Google Analytics