<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. gradle使用小记

    1.全局排除依赖: allprojects {    apply plugin: 'java'    apply plugin: 'eclipse'    apply plugin: 'maven-p ...

  2. rabbitmq——用户管理

    安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的账号guest登陆管理控制台,却提示登陆失败. 翻看官方的release文档后,得知由于账号gues ...

  3. 疑问-hadoop

    hadoop可以设置备份数据个数,那么这些不同节点的数据块对于hadoop来说有区分谁是备份的谁是直接可以用的吗? hadoop有机架策略,给某些操作如像根据带宽选择节点传输数据 那么这种策略的根据是 ...

  4. 协议Protocol

    1.协议:是一组声明方法的集合,不能声明成员变量,作用类似于接口.           遵守此协议的类就相当于拥有了这个协议的所有方法的声明,如果父类遵守了某个协议,子类也遵守了这个协议.       ...

  5. find & rm

    1)查找并删除3天前的历史文件 rm -rfi `find /tmp/ -ctime 3` 2)按分钟查找 find -cmin N

  6. python(2)-字符串(2)

    字符串格式化: 前面说过一种字符串格式化方法,来复习一下: >>> print('His name is %s', 'jeff') His name is %s jeff 其实格式化 ...

  7. UE设置 去掉bak备份文件

    使用ue打开文件,修改保存后,会产生.bak备份文件,感觉不爽,如何去掉呢? 1:在ue菜单栏,选择“高级”按钮选项  —— “配置”选项 2:在弹出的选择框中,找到“备份”—— 勾选“不备份” 选项 ...

  8. Scala中的元组

    元组 元组使用()表示的数据结构 元组使用()表示的数据结构 还可以使用模式匹配访问 使用场景非常有限,用于函数返回值不止1个的情况下 看代码: /** * 元组 * @author Administ ...

  9. 如何识别Baiduspider

    上周百度站长平台接到某站长求助,表示误封禁了Baiduspider的IP,询问是否有办法获得Baiduspider的所有IP,打算放入白名单加以保护,防止再次误封.在此要告诉各位站长,Baiduspi ...

  10. 使用PL/SQL删除百万条记录的大表

    使用PL/SQL删除百万条记录的大表: 最近开发人员对测试环境数据库进行了压力测试,数据库中产生了大量的脏数据.有几张大表里数据量均在百万甚至千万条的记录数.开发人员现提出需求如下: 只清理其中的部分 ...