canvas 画线

最新推荐文章于 2018-08-28 23:31:06 发布
最新推荐文章于 2018-08-28 23:31:06 发布
阅读量110 收藏
点赞数
分类专栏： html5 文章标签： 画线实例（天地）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhantao/article/details/84254605
版权
<!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>
[align=left]<div> 利用canvas 画出“天地”两个字</div>[/align]
</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>
wangzhantao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Html5 Canvas画线有毛边解决方法
09-28
Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题，特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...
HTML5 Canvas disable anti-aliasing drawing - HTML5 Canvas 如何取消反锯齿绘图
love19820823
12-08 240
HTML5 Canvas 如何取消反锯齿绘图 (HTML5 Canvas how to turn off anti-aliasing drawing) 一、问题的提出 我们都知道反锯齿（anti-aliasing）绘图给我们带来更好的视觉体验，有了这个技术，绘制的图形的边缘再不是以前毛毛躁躁的样子了。这就是采用反锯齿算法的功劳。其实质就是把要绘制的颜色边缘和背景颜色做适当的融合，在人的眼睛看来，有...
canvas 加抗锯齿
yzongjie的专栏
04-27 1058
[size=large] canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG)); [/size]
canvas锯齿
weixin_30388677的博客
08-27 67
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> ...
HTML5中Canvas画线技巧大全
Sayesan的专栏
08-28 6117
我们都知道在HTML5中最重要的亮点之一就是Canvas标签，他主要用途就是绘画，那么说到绘画技术，肯定就是要从画线开始，那么怎样使用canvas画线，canvas画线技巧是什么，下面为大家讲解canvas画线技巧； 首先我们肯定要先搭建一个画线“舞台”。 html>        Canvas画线技巧     var myCanvas = document.getEl
利用canvas实现折线图的绘制
郭蕾蕾 努力的包子
11-17 4881
我们知道现在的很多H5的小游戏的开发都是基于canvas这个画布的，其实canvas之所以这么强大考的是他强大的API库的结果，知道一些canvas的基本API并且可以利用这些API是一个前端开发人员的基本素质，那么我们今天就来跟着小编来一起利用面向对象的思想来封装一个折线图的绘制
canvas画线
08-12
学习和掌握Canvas画线不仅有助于创建交互式图表、游戏或者动画，还可以用来构建数据可视化应用，提供用户友好的界面。同时，了解和实践Canvas API也有助于提升Web开发者的前端技能，使其能够更自由地在网页上实现...
delphi用canvas画线搞锯齿demo
01-15
例如，可以在画线前调用Canvas.SetPixelFormat函数，选择支持抗锯齿的像素格式。然后，使用Canvas的LineTo等方法进行画线。这种方法可能需要对Windows API有较深入的理解，实现起来相对复杂。 在提供的文件列表中，...
Canvas画布线条组合动画特效.zip
最新发布
11-02
在这个“Canvas画布线条组合动画特效.zip”文件中，很可能包含了一个使用Canvas API创建的线条组合动画示例。这种特效通常用于提升网页的视觉吸引力，尤其在网站头部、背景或交互元素中常见。 首先，让我们深入了解...
WPF用鼠标在Canvas画线
03-19
在WPF中实现鼠标在Canvas上画线的功能，可以通过监听鼠标的事件并结合图形绘制API来完成。以下是实现这一功能的关键知识点和步骤： ### 1. 基本概念 - **WPF**：Windows Presentation Foundation是.NET Framework的...
canvas绘制线条1像素的问题
weixin_30653023的博客
09-08 364
http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/ 转载于:https://www.cnblogs.com/XIE7654/p/7493315.html
canvas 画图移动端出现锯齿毛边的解决方法
泥猴桃的博客
08-28 6504
最近项目中用的canvas 越来越多，但是之前都是在canvas 上画图片， 最近这次是做一个折线图，自己画出来以后发现有锯齿，百度一番后找到了解决办法，记录到博客里。 声明一下，我用的是第二种方法，第一种方法，看代码原理没问题，也就整理过来了 使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个...
.canvas绘制出来的东西有锯齿,怎么解决?
u010619243的博客
04-10 1万+
问题： .canvas绘制出来的东西有锯齿,怎么解决? 解决方法： 放大了画，再缩小 相关代码  PS:代码里是放大了2倍,我实际实验了一下,放大4倍效果不错.  相关知识 设备像素比devicePixelRatio简单介绍
canvas画笔升级版
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-04 292
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;画板&lt;/title&gt; &lt;style&gt; *{paddin
去除canvas 画圆的毛边
yeshen.org
01-29 4262
还是上上篇博客遗留下来的问题，http://blog.csdn.net/yeshennet/article/details/50531007 产品经理坐在我身后，一直在念叨，怎么有毛边怎么有毛边，视觉的妹子也坐不住了，修修修...... 其实我在浏览器上看到也有点模糊，怎么办呢，后来我找到了这个东西：http://jondavidjohn.github.io/hidpi-canvas-poly
canvas画水平曲线走势图
u011511086的专栏
08-18 3993
window.onload = function () { var arr = [10, 50, 30, 70, 80, 40, 90, 110, 80, 60, 69, 85, 94, 100, 80, 70, 60, 50, 80, 10, 50, 30, 70, 80, 40, 90, 110, 80, 60, 69, 85, 94, 100, 80, 70, 60,
清除，H5中canvas画的图中的锯齿
qq_29816565的博客
08-24 3057
手动开启HTML5 Canvas的抗锯齿可以用 canvas.getContext('2d').imageSmoothingEnabled = true; 或者直接把整个画布偏移0.5像素： canvas.getContext('2d').translate(0.5, 0.5);
利用canvas+Chart.js实现动态折线图
热门推荐
zyq19931019的博客
09-20 1万+
有用highcharts做动态折线图的源代码，但是看了太麻烦，也不好diy。因此决定在原有的canvas+charts.js的基础上做动态折线图。 第一步当然加载记得加载所需要的Chart.js 第二步是用js创建出canvas对象， this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getConte
canvas画线颜色
07-28
在Canvas中，可以使用以下代码来设置画线的颜色： ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'red'; // 设置线条颜色为红色 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值