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. Qt msvc 乱码如何解决？

    #ifdef Q_OS_WIN #pragma execution_character_set("UTF-8") #endif

  2. 《android开发艺术探索》读书笔记（十一）--Android的线程和线程池

    接上篇<android开发艺术探索>读书笔记(十)--Android的消息机制 No1: 在Android中可以扮演线程角色的有很多,比如AsyncTask.IntentService.H ...

  3. Java文件复制与读写

    函数介绍 public String readLine():每次读取文件的一行,当文件读取完毕时,返回null     public int read(byte[] b):将文件内容读取到字节数组b ...

  4. 算法提高 P1001

    必须感叹下,大数模板就是好用! AC代码: #include <cstdio> #include <cmath> #include <algorithm> #inc ...

  5. Linux的软链接和硬链接

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...

  6. 单例模式，堆，BST，AVL树，红黑树

    单例模式 第一种(懒汉,线程不安全): public class Singleton { private static Singleton instance; private Singleton () ...

  7. ubuntu设置网络

    二 .设置无线网络 1.首先确认一下你的无线驱动已经安装 方法一,查看一下ubuntu右上角的网络设置中有无线连接,如果有说明已经驱动了,ubuntu自带的就会驱动无线网卡. 方法二,iwconfig ...

  8. Jenkins Android 自动打包配置

    一.Jenkins自动打包配置 目标:1. 自动打包:2. 自动上传:3. 友好下载 1. Jenkins简介 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作. 减少重复劳 ...

  9. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  10. 挖一挖不常用到而又很实用的重载-Trim

    这个我想没有那个开发人员说不知道,但是里面有一个重载,这个不知道有多少开发人员知道! 可以看到,我可以去掉字符串前后的指定字符,只要我在char[]中指定即可,而不是仅仅去掉空格,这次为什么要提它,是 ...