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. vector动态数组

    vector是STL模板库中的序列式容器,利用它可以有效地避免空间的浪费. 创建vector容器 vector< int >v:vector< char >:vector< ...

  2. Codeforces446C - DZY Loves Fibonacci Numbers

    Portal Description 给出一个\(n(n\leq3\times10^5)\)个数的序列,进行\(m(m\leq3\times10^5)\)次操作,操作有两种: 给区间\([L,R]\) ...

  3. Java版2048

    功能要求:2048的基本界面,能够实现2048的游戏功能. 总思路:两个类:Game和GameListener. Game负责界面的实现和paint方法的重写 GameListener负责实现键盘和鼠 ...

  4. swap分区的扩展

    Linux中Swap(即:交换分区),类似于Windows的虚拟内存,就是当内存不足的时候,把一部分硬盘空间虚拟成内存使用,从而解决内存容量不足的情况.swap分区在非高内存的服务器上必不可少,但是s ...

  5. 【前端】Vue2全家桶案例《看漫画》之二、完成首页基本样式

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

  6. 4.1 PCIe总线的基础知识

    与PCI总线不同,PCIe总线使用端到端的连接方式,在一条PCIe链路的两端只能各连接一个设备,这两个设备互为是数据发送端和数据接收端.PCIe总线除了总线链路外,还具有多个层次,发送端发送数据时将通 ...

  7. 3.3.3 PCI设备对可Cache的存储器空间进行DMA读写

    PCI设备向"可Cache的存储器空间"进行读操作的过程相对简单.对于x86处理器或者PowerPC处理器,如果访问的数据在Cache中命中,CPU会通知FSB总线,PCI设备所访 ...

  8. Flex中的FusionCharts 四图监听

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  9. 配置JBoss环境变量

    配置JBoss环境变量 1.单击"计算机"右键,选中"属性" 2.找到"高级系统设置",并且单击,会弹出一个窗口 3.选择"高级- ...

  10. Html细线表格的实现 打印边框设置

    在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了. <table border="1" cellspacing="0" border ...