<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. maven系列之一maven安装和与IDE集成

    第一部分:maven的基本信息和安装,配置  maven是一个项目构建和管理的工具,提供了帮助管理 构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行依赖管理.管理二进制库等 ...

  2. 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动

    这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...

  3. Apache服务器中配置虚拟机的方法

    新浪微博虚拟机开发配置步骤及介绍.1.由于后面虚拟机中需要用到Rewrite所以先编辑Apache的conf目录下的httpd.conf文件.(可根据实际需要操作)添加mod_rewrite.so模块 ...

  4. Objective-C ,ios,iphone开发基础:多个视图(view)之间的切换,以及视图之间传值。

    所有的视图都继承自 UIViewController,都使用 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nib ...

  5. Java之MySql数据库链接

    一 下载MySql驱动包,下载途径很多,随便Google或度娘一下就有,我下载的是mysql-connector-java-5.1.26版本,下载后把它解压到指定路径 二 在Eclipse中新建项目T ...

  6. “Request Entity Too Large” 上传图片出现大小限制

    昨天公司安卓app上传了图片爆了下面这个错误 <"-//IETF//DTD HTML 2.0//EN"> <html><head> <ti ...

  7. 关于hkcmd.exe造成的和Eclipse之间热键冲突

    可能是自己新买的笔记本比较强大,显卡也比较牛叉.当使用一些常用的Eclipse快捷键的时候Eclipse本身没有反应,反而显示器有了反应. 经常用的Eclispse中的快捷键Ctrl+Alt+↑ 和C ...

  8. centos 安装 acrobat Reader之后

    IV: 为Firefox等浏览器安装Acrobat Reader插件:sudo /usr/local/Adobe/Acrobat7.0/Browser/install_browser_plugin按照 ...

  9. java性能

    一.关于性能的基本知识  1.性能的定义  在我们讨论怎样提高Java的性能之前,我们需要明白“性能“的真正含义.我们一般定义如下五个方面作为评判性能的标准.  1) 运算的性能----哪一个算法的执 ...

  10. Windows中使用cmd实现自定义Service的安装与卸载

    在项目中,有些时候我们需要自定义一些Service来定时处理一些业务逻辑,这时候就涉及到如何安装与卸载service的问题了,具体如何安装呢?在此整理一些解决方案供大家参考: 方案一: 1.运行--〉 ...