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. DxPackNet 4.保存音视频为本地avi文件

    捕获到了音视频后要保存到本地文件,这是很常见的应用场景,DxPackNet保存视频文件也比较简单 用 IAviStreamWriter  avi文件写入流即可 1.初始化相关设备,设定好数据捕获的回调 ...

  2. AssetBundle实现服务器下载并从本地读取

    废话不多说  直接上代码. 从服务器下载的, 很简单 private IEnumerator Start() { byte[] ab = null; int len = 0; WWW www =nul ...

  3. Java中的return关键字

    Java常见面试题之一: try {}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后?  请看下面程序就可以解释 ...

  4. SSH服务端配置、优化加速、安全防护

    CentOS7自带的SSH服务是OpenSSH中的一个独立守护进程SSHD.由于使用telnet在网络中是明文传输所以用其管理服务器是非常不安全的不安全,SSH协议族可以用来对服务器的管理以及在计算机 ...

  5. dm642的中断

    void fifoint_isr();            extern far void vectors(); void int_init() {  IRQ_resetAll();  IRQ_se ...

  6. linux下面的fd限制

    如果不考虑内存大小的限制,在linux下面,fd (即file descriptor)的数量来自2个限制(阈值).其一:是操作系统的限制.这个限制主要是在linux内核中,我们知道,用户程序的fope ...

  7. R语言︱机器学习模型评价指标+（转）模型出错的四大原因及如何纠错

    笔者寄语:机器学习中交叉验证的方式是主要的模型评价方法,交叉验证中用到了哪些指标呢? 交叉验证将数据分为训练数据集.测试数据集,然后通过训练数据集进行训练,通过测试数据集进行测试,验证集进行验证. 模 ...

  8. zTree实现多选树

    zTree实现多选树 1.实现源码 <!DOCTYPE html> <html> <head> <title>多选树</title> < ...

  9. Linux显示一行显示列总计

    Linux显示一行显示列总计 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -t total used free shared buffers ca ...

  10. （六）java结构控制语句

    选择语句,也叫条件分支语句:if--else和switch--case:其中if--else中的else是可选的,但是switch--case中的case是必须的.     switch后的条件必须是 ...