<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                // one

                    // 直线状态设置

                    context.beginPath();

                        context.moveTo(100,100);

                        context.lineTo(700,700);

                        context.lineTo(100,700);

                        context.lineTo(100,100);  

                    context.closePath();

                    context.lineWidth = 5;    

                    // 绘制线 stroke

                    context.strokeStyle="blue";

                    context.stroke();          

                    // 填充色 fill

                    context.fillStyle = "rgb(2,100,30)";

                    context.fill();

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

/*总结

    1.canvas的三个方法 width 、height、context

        context的方法

            moveTo  画笔起始位置

            lineTo  经过点

            lineWidth  线宽

            strokeStyle 画笔色

            stroke   绘制

            fillStyle 填充色

            fill  填充

    2.绘制多个图形的时候要使用

        context.beginPath

        context.closePath

*/

    </script>

</body>

</html>

Canvas-line.html的更多相关文章

  1. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  2. 画线缩放、瞳距缩放、Line延长到指定长度，内附效果，源码供应，解压就跑

    前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...

  3. AspJpeg使用 .

    下载ASPJpeg的bll库,引用 一.为图片添加水印//实例化组件ASPJPEGLib.IASPJpeg objJpeg = new ASPJPEGLib.ASPJpeg();//打开源图片文件ob ...

  4. Win10 UWP开发中的重复性静态UI绘制小技巧 2

    小技巧1 地址:http://www.cnblogs.com/ms-uap/p/4641419.html 介绍 我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制,使得U ...

  5. Win10 UWP开发中的重复性静态UI绘制小技巧 1

    介绍 在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态的界面设计.比如:画许多等距的线条,画一圈时钟型的刻度线,同特别的策略排布元素,等等. 读者可能觉得这些需求十分简单, ...

  6. silverlight ListBox 多列图片效果

    这个功能之前用wpf写过一次这次用Silverlight写一次 这两种写法上基本上没有太大的差别 这个Demo并不完美,只是给大家提供一个思路 源码:SilverLightListPricture.r ...

  7. Machine Learning for Developers

    Machine Learning for Developers Most developers these days have heard of machine learning, but when ...

  8. MVC整个样例的源代码

    以下就是整MVC样例的源代码: #windows应用程序 #开发者:蔡军生(QQ:9073204) 深圳 2014-9-24 #使用类来描写叙述 from ctypes import * from c ...

  9. WPF 10天修炼 第八天 - 形状、画刷和变换

    图形 在WPF中使用绘图最简单的就是使用Shape类.Shape类继承自FrameworkElement,是一个专门用来绘图的类.Shape类中年派生的类有直线.矩形.多边形和圆形等. System. ...

  10. 重写TreeView，自定义图标，生成通行的下划线，取消默认获得焦点失去焦点的效果，并支持拖拽节点到外界

    1.运行效果: 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.VideoTreeControl" xmlns="ht ...

随机推荐

  1. opentwebst一个ie自动化操作测试软件-功能强大

    opentwebst一个ie自动化操作测试软件-功能强大 一个ie自动化操作测试软件,自动根据操作记录脚本.生成vbs,js和其他脚本语言,用来运行 里面包含了两个东西: 1.脚本操作自动记录,记录下 ...

  2. JDBC创建链接的几种方式

    首先,使用java程序访问数据库的前提 数据库的主机地址(ip地址) 端口 数据库用户名 数据库用户密码 连接的数据库 代码: private static String url = "jd ...

  3. Jquery - 添加属性、添加class、添加Css

    一.设置属性: 方式一  jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image&q ...

  4. fiddler 使用方法汇总

    作为网络开发人员,怎能不使用一些抓包工具呢?fiddler是个不错的选择. 不过,一般情况下,我们往往使用浏览器自带的控制台的[网络]选项就可以达到查看数据的通信情况了,当然,一些浏览器不容易捕捉的事 ...

  5. php使用curl模拟登录带验证码的网站[开发篇]

    需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\ ...

  6. iOS-微信支付商户支付下单id非法

    最近在APP中WKWebView中调用微信支付的时候,一直报商户支付下单id非法.看了n边微信文档,度娘了n次-----仍未解决.因为安卓的支付是没有问题的所以就跟安卓兄弟要了最终调用微信的字符串: ...

  7. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  8. C++Primer笔记之复制控制

    复制控制这一节需要注意的地方不多,主要有以下几点: 1.定义自己的复制构造函数 什么时候需要定义自己的复制构造函数,而不用系统提供的,主要遵循以下的经验说明: 某些类必须对复制对象时发生的事情加以控制 ...

  9. [原]Windows Azure开发之Linux虚拟机

      Windows Azure是微软的云服务集合,用来提供云在线服务所需要的操作系统与基础存储与管理的平台,是微软的云计算的核心组成组件之一.其中windows azure提供的最重要的一项服务就是虚 ...

  10. 在 Ubuntu 上安装 TensorFlow (官方文档的翻译)

    本指南介绍了如何在 Ubuntu 上安装 TensorFlow.这些指令也可能对其他 Linux 变体起作用, 但是我们只在Ubuntu 14.04 或更高版本上测试了(我们只支持)  这些指令. 一 ...