<canvas id="other"   style="width:320px;height:320px;"></canvas>

  

       var otherCanvas=document.getElementById('other');
//获取真实width和height 设置到canvas的width和height
var height=otherCanvas.offsetHeight,width=otherCanvas.offsetWidth;
otherCanvas.width=width;
otherCanvas.height =height;
var context=otherCanvas.getContext("2d");
context.lineWidth="1";//设置线的宽
context.strokeStyle="#E8E8E8";//颜色
context.beginPath();//开始划线
context.moveTo(width,0);//设置起点(x,y)
context.lineTo(width/2+16,height/2);//画线(x,y)
context.lineTo(width,height);//画线(x,y)
context.stroke();//生成线条
context.font = ' 14px sans-serif';//字体
context.fillText("*其他",16,(height/2)+8);//写入字符

最后生成如下效果

一段画对角线的canvas代码,之前没有写过canvas代码,现在记录下来的更多相关文章

  1. 瞧一瞧,看一看呐,用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!!

    瞧一瞧,看一看呐用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!! 现在要写的呢就是,用MVC和EF弄出一个CRUD四个页面和一个列表页面的一个快速DEMO,当然是在不 ...

  2. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  3. html5 手写的canvas实现

    试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{  penColor:'#FF0000',  penWidt ...

  4. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  5. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  6. Java中静态代码块、构造代码块、构造函数、普通代码块

    在Java中,静态代码块.构造代码块.构造函数.普通代码块的执行顺序是一个笔试的考点,通过这篇文章希望大家能彻底了解它们之间的执行顺序. 1.静态代码块 ①.格式 在java类中(方法中不能存在静态代 ...

  7. 可执行代码(Executable Code)目标代码(object code)

    小结: 1.可执行代码(Executable Code)是指将目标代码(object code)连接后形成的代码,简单来说是机器能够直接执行的代码. https://baike.baidu.com/i ...

  8. canvas绘画基础(一):认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  9. Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据

    前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...

随机推荐

  1. c#智能感知(设置)及实现

    1) 使用工具->选项菜单命令,选择文本编辑器->C#设置, 将上面圈出的2个复选框(自动列出成员和参数信息)打勾, 然后 Intellisense就会工作了.(如果没这么多选项,请勾选S ...

  2. #pragma_pack(n)_与___attribute(aligned(n))

    #pragma pack(n) 与 __attribute(aligned(n))   在C语言中,结构是一种复合数据类型,其构成元素既可以是基本数据类型(如int.long.float等)的变量,也 ...

  3. Neo4查询语言Cypher3.0.7在antlr4下的文法(原创分享)

    本人网上找了很久都没有一个比较好的cypher文法,于是花了一段时间研究cypher和编写基于antlr4下的cypher文法. 希望对想用做cypher相关工具的朋友有一点用,欢迎交流. 珍重声明: ...

  4. ASP.NET MVC and jqGrid 学习笔记 6-增删改操作

    程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...

  5. JAVA实现DES加密

    DES加密介绍       DES是一种对称加密算法,所谓对称加密算法即:加密和解密使用相同密钥的算法.DES加密算法出自IBM的研究,后来被美国政府正式采用,之后开始广泛流传,但是近些年使用越来越少 ...

  6. 在Flex4中使用RemoteObjectAMF0来连接fluorine网关 转

    转http://vipnews.csdn.net/newscontent.aspx?pointid=2011_04_21_142132661 RemoteObjectAMF0是一个开源组件,可以很方便 ...

  7. MSP430常见问题之AD转换类

    Q1:MSP430F149 AD 的输入阻抗有多大?A1:RC<2000欧*30PF Q2:MSP430 ADC12 模块的速度?A2: ADC12 的转换速率是转换所需的ADC12CLK 以及 ...

  8. (转载)Java NIO:NIO概述(一)

    Java NIO:NIO概述 在上一篇博文中讲述了几种IO模型,现在我们开始进入Java NIO编程主题.NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题.本文下面分别从Java ...

  9. Socket编程初探

    一.什么是Socket? 通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.在Internet上的主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个S ...

  10. 解决Jquery和prototype的兼容问题

    1. 引入jquery 时,将jquery库在 prototype之前引入: 2.使用时: jQuery.noConflict();  // 这个要在 之前加上 3.初始化加载 (这里我试过,可以有两 ...