一段画对角线的canvas代码,之前没有写过canvas代码,现在记录下来
<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代码,现在记录下来的更多相关文章
- 瞧一瞧,看一看呐,用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!!
瞧一瞧,看一看呐用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!! 现在要写的呢就是,用MVC和EF弄出一个CRUD四个页面和一个列表页面的一个快速DEMO,当然是在不 ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- html5 手写的canvas实现
试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{ penColor:'#FF0000', penWidt ...
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- canvas画布实现手写签名效果
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...
- Java中静态代码块、构造代码块、构造函数、普通代码块
在Java中,静态代码块.构造代码块.构造函数.普通代码块的执行顺序是一个笔试的考点,通过这篇文章希望大家能彻底了解它们之间的执行顺序. 1.静态代码块 ①.格式 在java类中(方法中不能存在静态代 ...
- 可执行代码(Executable Code)目标代码(object code)
小结: 1.可执行代码(Executable Code)是指将目标代码(object code)连接后形成的代码,简单来说是机器能够直接执行的代码. https://baike.baidu.com/i ...
- canvas绘画基础(一):认识canvas画布
html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...
- Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...
随机推荐
- linux 进程地址空间的一步步探究
我们知道,在32位机器上linux操作系统中的进程的地址空间大小是4G,其中0-3G是用户空间,3G-4G是内核空间.其实,这个4G的地址空间是不存在的,也就是我们所说的虚拟内存空间. 那虚拟内存空间 ...
- 线程控制之线程和fork
当线程调用fork时,就为子进程创建了整个进程地址空间的副本.回忆http://www.cnblogs.com/nufangrensheng/p/3509492.html中讨论的写时复制,子进程与父进 ...
- eclipse ctrl+左击不能关联相应文件
<?xml version="1.0" encoding="UTF-8"?><projectDescription> <name& ...
- 小白日记5:kali渗透测试之被动信息收集(四)--theHarvester,metagoofil,meltag,个人专属密码字典--CUPP
1.theHarvester theHarvester是一个社会工程学工具,它通过搜索引擎.PGP服务器以及SHODAN数据库收集用户的email,子域名,主机,雇员名,开放端口和banner信息. ...
- C# 之 静态字段初始化
当一个字段声明中含有 static 修饰符时,由该声明引入的字段为静态字段(静态变量).当不存在 static 修饰符时,由该声明引入的字段为实例字段(实例变量). 静态字段不 ...
- Sky number
描述 key 天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992,这个数,它的十进制数表示,其四位数字之和为2+9+9+2=22,它的十六进 制数BB0,其四位数字之和也为22,同时 ...
- Android 高级UI设计笔记05:使用TextView实现跑马灯的效果
1. 使用TextView属性实现跑马灯的效果: (1). 新建一个Android工程,命名为"MarqueeTextViewDemo",如下: (2). 来到activity_m ...
- Javascript与Ajax
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
- const 指针与指向const的指针
最近在复习C++,指针这块真的是重难点,很久了也没有去理会,今晚好好总结一下const指针,好久没有写过博客了,记录一下~ const指针的定义: const指针是指针变量的值一经初始化,就不可以改变 ...
- Scala官方作弊条
Scala官方作弊条请参考:http://docs.scala-lang.org/cheatsheets/