<!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. Springboot高版本中@ConfigurationProperties注解取消location属性

    在spring boot 1.5 版本之前 在@ConfigurationProperties注释中有两个属性:locations:指定配置文件的所在位置prefix:指定配置文件中键名称的前缀 sp ...

  2. C# 监听HTTP请求

    先把代码放在这里,下面再详细解说: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Oracle.DataAccess.Client; ...

  3. 关于ASP.NET MVC 中JsonResult返回的日期值问题

    最近开始用MVC做项目,在使用 JsonResult返回数据的时候,日期被反射成了/Date 1233455这种格式,遍查网上都是在客户端使用JS来处理这个问题的,这样的话,就需要在每一个涉及到日期的 ...

  4. python 使用进程池Pool进行并发编程

    进程池Pool 当需要创建的子进程数量不多时,可以直接利用multiprocessing中的Process动态成生多个进程,但如果是上百甚至上千个目标,手动的去创建进程的工作量巨大,此时就可以用到mu ...

  5. Akka-Cluster（1）- Cluster Singleton 单例节点

    关于cluster-singleton我在前面的博文已经介绍过,在这篇我想回顾一下它的作用和使用方法.首先,cluster-singleton就是集群某个节点上的一个actor.任何时间在集群内保证只 ...

  6. go连接mysql

    package main import ( "database/sql" "fmt" _ "github.com/go-sql-driver/mysq ...

  7. Java序列化技术即将被废除！！！

    我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术.Java序列化技术正是将对象转变成一串由二进制字节组成的数组,可以通过将二进制数据保存到磁盘或者 ...

  8. hdu 6127---Hard challenge（思维）

    题目链接 Problem Description There are n points on the plane, and the ith points has a value vali, and i ...

  9. [Umbraco] umbraco中如何分页

    分页功能应该说是web开发中最基本的功能了,常规的做法是通过查询sql语句进行分页数据显示.但在umbraco中却不是这样子的.而且通过xpath中的postion来定位.如下代码 <?xml ...

  10. 如何用python爬取两个span之间的内容

    Python用做数据处理还是相当不错的,如果你想要做爬虫,Python是很好的选择,它有很多已经写好的类包,只要调用,即可完成很多复杂的功能,此文中所有的功能都是基于BeautifulSoup这个包. ...