<!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. js的微观性能

    概述 js的微观性能是指js的某一个表达式或者某一行或者某一块代码的性能.几天前和同事讨论过这方面的内容,今天深入研究了一下,记录下来,供以后开发时参考,相信对其他人也有用. 从一段代码说起 记得以前 ...

  2. koa-static与react-create-app搭配的路径

    概述 前端路由与后端路由的结合一直是一个难题.koa-static这个中间件能够把静态资源"搬到"后端路由上面去,react-create-app在不解构的情况下只会把资源打包到b ...

  3. webpack热加载：修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  4. jQuery应用实例1：定时弹出图片

    以前用JS实现的:http://www.cnblogs.com/xuyiqing/p/8373064.html 这里利用jQuery实现,并且做得更完善: <!DOCTYPE html> ...

  5. Swift5 语言指南(十三) 方法

    方法是与特定类型相关联的函数.类,结构和枚举都可以定义实例方法,这些方法封装了用于处理给定类型的实例的特定任务和功能.类,结构和枚举也可以定义类型方法,它们与类型本身相关联.类型方法类似于Object ...

  6. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  7. 撰写一篇博客要求讲述四则运算2的设计思想，源程序代码、运行结果截图、编程总结分析，并按照PSP0级的要求记录开发过程中的时间记录日志。

    一.撰写一篇博客要求讲述四则运算2的设计思想,源程序代码.运行结果截图.编程总结分析,并按照PSP0级的要求记录开发过程中的时间记录日志. 1.设计思想: ①创建test.jsp建立第一个前端界面,提 ...

  8. Python基础教程(第3版) 笔记（一）

    1.1 数和表达式: 除法运算的结果为小数,即浮点数 >>>1/2 0.5 除法运算为整数,使用双斜杠 >>>1//2 0 >>>5.0//2.4 ...

  9. C# DataGridView下DataGridViewComboBoxColumn二级联动

    效果: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Da ...

  10. 如何更优雅的在kubernetes平台下记录日志

    背景 传统项目里面记录日志大多数都是将日志记录到日志文件,升级到分布式架构以后,日志开始由文件转移到elasticsearch(es)中来存储,达到集中管理.在kubernetes平台里面把日志记录到 ...