demo.js

function draw(id)  {

    var CANVAS=document.getElementById(id);

    var  context=CANVAS.getContext('2d');

    context.fillStyle="#eeeeef";

    context.fillRect(0,0,300,400);

    var dx=150;

    var dy=150;

    var s=100;

    context.beginPath();

    context.fillStyle="rgb(100,255,100)";

    context.strokeStyle="rgb(0,0,100)";

    var x=Math.sin(0);

    var y=Math.cos(0);

    var dig=Math.PI/15*11;

    for(var i=0;i<30;i++)  {

        var x=Math.sin(i*dig);

        var y=Math.cos(i*dig);

        context.lineTo(dx+x*s,dy+y*s);

    }

    context.closePath();

    context.fill();

    context.stroke();

}

　　demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="demo.js"></script>

</head>

<body  onload="draw('mycanvas')">

<canvas  id="mycanvas"   width="300" height="400" >

    <span>你的浏览器不支持canvas</span>

</canvas>

</body>

</html>

　　效果：

2017-09-08  09:24:38

html5 lineTo的使用例子的更多相关文章

  1. 天气窗件展示 -一个HTML5 地理位置应用的例子

         定位及地理位置信息是LBS应用的核心,和定位功能有所不同的是地理位置信息更关注如何得到有意义的信息.(例如一条街道的地址)      从这边文章里你会学到HTML5地理位置信息的各种功能.它 ...

  2. 一个给力的html5 画多边形的例子

    只需改变参数就能画出你想要的多边形,代码简单!不得不惊叹canvas的强大! 代码奉上 <!doctype html> <html> <head> <meta ...

  3. Html5 Canvas一个简单的画笔例子

    相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...

  4. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  5. 将HTML5封装成android应用APK文件的几种方法

    越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜 ...

  6. 将HTML5封装成android应用APK文件的几种方法（转载）

    越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜 ...

  7. 将HTML5封装成android应用APK文件的几种方法(转)

    作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性.HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动 设备上使用HTML5技术.随着HTML5跨平台支持的不断增强 ...

  8. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  9. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

随机推荐

  1. redis学习 --List

    1:添加   lpush    rpush     如果没有key的话,会报错.   lpushx    rpushx    如果没有key的话,不做任何反应. 2:得到 lpop   rpop   ...

  2. 理解性能的奥秘——应用程序中慢，SSMS中快（4）收集解决参数嗅探问题的信息

    ---从计划缓存中直接获取查询计划和参数: ), ) SELECT @dbname = 'hydee_连锁', @procname = 'dbo.p_select_ware'; WITH baseda ...

  3. [CF959D]Mahmoud and Ehab and another array construction task题解

    解法 非常暴力的模拟. 一开始吧\(1 -> 2 \times 10^6\)全部扔进一个set里,如果之前取得数都是与原数组相同的,那么lower_bound一下找到set中大于等于它的数,否则 ...

  4. easyui的datagrid里getSelections只能获取一行值？？？

    使用getSelections只能获取到一行的值,检查了半天是因为idField属性值写错,更正之后ok. 解决办法二:改为使用getChecked,idField写错无影响, 注: getSelec ...

  5. jstl学习资料

    jstl印象中叫标准标签库,是apache的一个项目,网址为: Apache Taglibs - Apache Standard Taglib: JSP[tm] Standard Tag Librar ...

  6. Python分布式爬虫打造搜索引擎完整版-基于Scrapy、Redis、elasticsearch和django打造一个完整的搜索引擎网站

    Python分布式爬虫打造搜索引擎 基于Scrapy.Redis.elasticsearch和django打造一个完整的搜索引擎网站 https://github.com/mtianyan/Artic ...

  7. p4111 [HEOI2015]小Z的房间[简述矩阵树定理]

    分析 [1]无向图 图G的度数矩阵为D,邻接矩阵为A 我们定义这个图的Kirchhoff矩阵为D-A 这个矩阵的任意一个n-1阶主子式的行列式的绝对值就是这个图的生成树个数 [2]有向图 如果要求内向 ...

  8. 初学Cadence 一

    点击打开 Design Entry CIS 弹出 不要选 OrCAD Capture,这个组件和OrCAD Capture CIS 相比少了很多东西,对元件的管理不方便.选 OrCAD Capture ...

  9. win2016

    slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-8XDDG slmgr /skms kms.03k.org slmgr /ato

  10. iview 表格 某一列中设置radio

    在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...