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. poj Hotel 线段树

    经典线段树的题. 每个节点存储的信息:左端点连续空房间的长度,右端点连续空房间长度,连续空房间的最大长度. 由于要求每次必须从尽量靠左边的位置进行居住,那么搜索时应尽量让区间起始位置更小: 1.如果当 ...

  2. Zookeeper笔记二-各种一致性协议解释

    我们知道Zookeeper的一致性是解决分布式事务的. 那么分布式事务代表的是强一致性. 强一致性解决的代表有以下协议(注意这几个协议跟zookeeper是没任何关系的,这是分布式的理论基础): 1. ...

  3. ACL访问控制列表

    acl是基于文件系统的,所以支不支持acl在于使用什么文件系统. FAT32文件系统不支持权限,也不区分大小写 如果一个分区不是安装系统时分的分区,是一个新的分区的话,默认是不支持acl CentOS ...

  4. Jmeter MD5插件

    实际业务中,会要求 HTTP 协议中附加 MD5 校验字段, 防止请求参数被恶意篡改, 对于开发同学来说, 这是个很简单的需求. 但是给自动化测试增加了难度, Jmeter 原生不支持这个功能,应测试 ...

  5. Jpa中设置OneToMany插入报异常解决办法

    在Jpa中如果设置@OneToMany,但使用的时候,如果没有赋值,会报异常出现,这时只需要实例化一个空数组即可, 但类型一定要对应: 实例如下: newField.setxxxxxList(new ...

  6. 5.4 TLP中与数据负载相关的参数

    在PCIe总线中,有些TLP含有Data Payload,如存储器写请求.存储器读完成TLP等.在PCIe总线中,TLP含有的Data Payload大小与Max_Payload_Size.Max_R ...

  7. Java中字符串的一些常见方法

    1.Java中字符串的一些常见方法 /** * */ package com.you.model; /** * @author Administrator * @date 2014-02-24 */ ...

  8. ATA接口寄存器描述

    ATA接口寄存器描述 .ATA接口的三种数据传输方式 位. )MDMA(Multiword DMA)传输,用于数据传输.ATA主机控制器向ATA设备下达MDMA传输命令后,等待设备向主机发送DMARQ ...

  9. 检测dll是32/64位 ?

    检测dll是32/64位 ? void CCheck32Or64Dlg::OnButton2() { CString fileName = ""; CFileDialog *fil ...

  10. hibernate学习（一）配置，导包

    框架的作用 学过javaWeb基础的已经对web层 jsp  servlet   ,service  层  ,dao层的jdbc .DBUtils 有了很深的了解 并编写代码实现某种功能 为了提高开发 ...