<!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. 迁移桌面程序到MS Store（1）——通过Visual Studio创建Packaging工程

    之前跑去做了一年多的iOS开发,被XCode恶心得不行.做人呢,最重要的是开心.所以我就炒了公司鱿鱼,挪了个窝回头去做Windows开发了.        UWP什么的很久没有正儿八经写了,国内的需求 ...

  2. 【算法】实现字典API：有序数组和无序链表

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  3. Linux - 结合正则表达式使用grep命令

    Grep with Regular Expression grep命令基本用法 grep [-acinv] [--color=auto] [-A n] [-B n] '搜寻字符串' 文件名参数说明: ...

  4. 人生苦短之---认识Python

    认识 Python 人生苦短,我用 Python —— Life is short, you need Python 目标 Python 的起源 为什么要用 Python? Python 的特点 Py ...

  5. 自定义线程池reject策略

    import java.util.Date;import java.util.concurrent.ArrayBlockingQueue;import java.util.concurrent.Rej ...

  6. 一个关于margin-top的问题

    两个 此时内部div的样式为 当我把margin选中 如图所示: 我想要的效果是子div离父div有一个20px的间隙,但显然现在不是我想要的结果, 然后就开始查资料: 这个“问题”……它是CSS2. ...

  7. Django--Session 操作

    Session Session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要 ...

  8. Linux_CentOS-服务器搭建 <二>

    Tomat安装: 说明: 源码安装,下载地址:http://tomcat.apache.org/.我下了个apache-tomcat-7.0.42.tar.gz 安装开始: 配置环境. JDK: vi ...

  9. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  10. SpringBoot2.0源码分析（二）：整合ActiveMQ分析

    SpringBoot具体整合ActiveMQ可参考:SpringBoot2.0应用(二):SpringBoot2.0整合ActiveMQ ActiveMQ自动注入 当项目中存在javax.jms.Me ...