1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7.  
  8. <body>
  9.     <canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>
  10.  
  11.     <script>
  12.  
  13.         window.onload = function(){
  14.             var canvas = document.getElementById('canvas');
  15.  
  16.             canvas.width = 1024;
  17.             canvas.height = 768;
  18.  
  19.             if(canvas.getContext('2d')){
  20.                 var context = canvas.getContext('2d');
  21.  
  22.                 // one
  23.  
  24.                     // 直线状态设置
  25.                     context.beginPath();
  26.  
  27.                         context.moveTo(100,100);
  28.                         context.lineTo(700,700);
  29.                         context.lineTo(100,700);
  30.                         context.lineTo(100,100);  
  31.  
  32.                     context.closePath();
  33.  
  34.                     context.lineWidth = 5;    
  35.  
  36.                     // 绘制线 stroke
  37.                     context.strokeStyle="blue";
  38.                     context.stroke();          
  39.  
  40.                     // 填充色 fill
  41.                     context.fillStyle = "rgb(2,100,30)";
  42.                     context.fill();
  43.  
  44.             }else{
  45.                 alert('当前游览器不支持Canvas，请更换游览器后再试！');
  46.             }
  47.         }
  48.  
  49. /*总结
  50.  
  51.     1.canvas的三个方法 width 、height、context
  52.  
  53.         context的方法
  54.             moveTo  画笔起始位置
  55.             lineTo  经过点
  56.             lineWidth  线宽
  57.  
  58.             strokeStyle 画笔色
  59.             stroke   绘制
  60.  
  61.             fillStyle 填充色
  62.             fill  填充
  63.  
  64.     2.绘制多个图形的时候要使用
  65.         context.beginPath
  66.         context.closePath
  67.  
  68. */
  69.     </script>
  70. </body>
  71. </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. 处理ios的overflow滚动bug

    先说说这个bug的场景 .container{ height:100vh; overflow-y:scroll; } 没毛病,总有这种类似的情况,需要在容器内滚动,但是!这种容器内的滚动在ios上面处 ...

  2. centos部署flask

    1.先安装uwsgi pip install uwsgi 2.在你的项目根目录下创建一个配置文件uwsgiconfig.ini(uwsgi支持多种配置文件格式,xml,ini,json等) [uwsg ...

  3. Unicode 字符串排序规则（二）：如何比较字符串

    一.UCA 简介 Unicode Collation Algorithm (UCA) 是 Unicode 规定的如何比较两个字符串大小的算法,也是事实上的标准.我们先来看下它的几个特征. 1.1 Mu ...

  4. vue环境安装

    node.js安装 https://nodejs.org/en/ cnpm安装 npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  5. 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”；Syntax error on token "Invalid Character"；Server returned HTTP response code: 503 for URL；

    元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”:复制的代码有中文空格 Syntax error on token "Invalid Character&qu ...

  6. eclipse在linux安装报错

    JVM terminated. Exit code=127/usr/bin/java-Dosgi.requiredJavaVersion=1.8-Dosgi.instance.area.default ...

  7. 课程四(Convolutional Neural Networks)，第二 周（Deep convolutional models: case studies） —— 1.Practice questions

    [解释] 应该是same padding 而不是 valid padding . [解释] 卷积操作用的应该是adding additional layers to the network ,而是应该 ...

  8. 微服务架构集大成者—Spring Cloud (转载)

    软件是有生命的,你做出来的架构决定了这个软件它这一生是坎坷还是幸福. 本文不是讲解如何使用Spring Cloud的教程,而是探讨Spring Cloud是什么,以及它诞生的背景和意义. 1 背景 2 ...

  9. go 通过http发送图片file内容

    package main import ( "encoding/json" "fmt" "io/ioutil" "net/http ...

  10. Kafka项目实战－用户日志上报实时统计之应用概述

    1.概述 本课程的视频教程地址:<Kafka实战项目之应用概述> 本课程是通过一个用户实时上报日志来展开的,通过介绍 Kafka 的业务和应用场景,并带着大家搭建本 Kafka 项目的实战 ...