canvas 绘制图形：

　　注意： canvas 的宽高设置在行内，否则会使画布（canvas）产生扭曲，绘图变形；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #canvas {

            background: #3B5998;

        }

    </style>

    <script>

        window.onload = function () {

//         画布

            var c = document.getElementById("canvas");

            /*获取上下文*/

            var cxt = c.getContext("2d");

            cxt.strokeStyle = "#09f";//线条的颜色；

            cxt.fillStyle= "#ff0000";//填充的颜色；

//            画线条：

//            cxt.moveTo( 100, 100 ); //起始点

//            cxt.lineTo( 300, 100 ); //终点；

//            cxt.stroke(); // 渲染出图形；

//            画矩形;

//            填充一个矩形；

//            cxt.fillRect( 50, 50, 300, 100 );//x, y, 宽， 高

//            cxt.strokeStyle = "#09f";

//            cxt.strokeRect( 50, 50, 300, 100 ); //空矩形

//            画圆：

//            true: 逆时针， false : 顺时针

//            arc(x,y,半径，起始度数，终止读数)

            cxt.arc(,,,*Math.PI,Math.PI*,true);

//            绘制文本；

//            cxt. font = "80px Arial";

//            填充文本（实体）

//            cxt.fillText("这是文本", 50, 100);

//              线条文本（空心）

//            cxt.strokeText("这是文本", 50, 100)

//            绘制图画

//            var img  = new Image();

//            img.src = "../image/1.jpg";

//            消除图片加载模糊的问题

//            img.onload = function () {

//              cxt.drawImage(img, 100, 100, 200, 200 );

//            }

//            最后： 渲染出图案；

//            cxt.stroke();//空心的；

            cxt.fill();//填充的；

        }

    </script>

</head>

<body>

<canvas id="canvas" width="400px" height="400px">

    请升级到ie9以上版本

</canvas>

</body>

</html>

canvas 绘制图形的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  3. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  4. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  5. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  6. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  7. HTML5 canvas绘制图形

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  9. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. MFRC522

    https://www.raspberrypi.org/documentation/hardware/raspberrypi/spi/README.md https://github.com/mxgx ...

  2. 总结MySQL大数据量下如何进行优化

    写在建库前: 在确定数据库业务后.建立数据库表格时,就应对一些常见问题有所考虑,以避免在数据增长一段时间后再做应对,可能造成时间及维护成本增加: 数据的月增量,年增量 数据的快速增长点 是否需要触发器 ...

  3. Centos小白命令

    centos在登录界面无法输入密码 Centos安装flash插件 Centos挂载windows ntfs分区 Centos搭建Eclipse C/C++环境 windows下的txt文件在cent ...

  4. linux dns子域授权 split分离解析 缓存dns服务器

    DNS子域授权作用:适用于同一个DNS组织父/子域名的解析工作由不同的dns服务器负责父dns服务器应该有为子域名迭代的能力 上下级区域属于不同的机构管理:.cn与.Anonymous.cn.cn需要 ...

  5. ImportError: No module named 'xlrd' 解决办法

    import pandas as pd data = pd.read_excel('工作簿1.xls',sheetname='Sheet1') 用pandas读取Excel文件时,会提示 Import ...

  6. 5_Longest Palindromic Substring（Manacher） --LeetCode

    参考:https://www.felix021.com/blog/read.php?2040,https://segmentfault.com/a/1190000002991199 做了修改. 首先用 ...

  7. 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画（可选）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...

  8. web开发性能优化---代码优化篇

    1.合理使用缓存使用 提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存.Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能. 1.页 ...

  9. Openstack_后端存储平台Ceph

    框架图 介绍 一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统 特点 CRUSH算法 Crush算法是ceph的两大创新之一,简单来说,ceph摒弃了传统的集中式存储元数据寻址的方案, ...

  10. windows共享虚拟机ubuntu目录

    1)安装 sudo apt-get install samba 2)配置文件vi /etc/samba/smb.conf 添加如下 3)启动服务 sudo service smbd start 4)w ...