一段画对角线的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.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...
随机推荐
- c#智能感知(设置)及实现
1) 使用工具->选项菜单命令,选择文本编辑器->C#设置, 将上面圈出的2个复选框(自动列出成员和参数信息)打勾, 然后 Intellisense就会工作了.(如果没这么多选项,请勾选S ...
- #pragma_pack(n)_与___attribute(aligned(n))
#pragma pack(n) 与 __attribute(aligned(n)) 在C语言中,结构是一种复合数据类型,其构成元素既可以是基本数据类型(如int.long.float等)的变量,也 ...
- Neo4查询语言Cypher3.0.7在antlr4下的文法(原创分享)
本人网上找了很久都没有一个比较好的cypher文法,于是花了一段时间研究cypher和编写基于antlr4下的cypher文法. 希望对想用做cypher相关工具的朋友有一点用,欢迎交流. 珍重声明: ...
- ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...
- JAVA实现DES加密
DES加密介绍 DES是一种对称加密算法,所谓对称加密算法即:加密和解密使用相同密钥的算法.DES加密算法出自IBM的研究,后来被美国政府正式采用,之后开始广泛流传,但是近些年使用越来越少 ...
- 在Flex4中使用RemoteObjectAMF0来连接fluorine网关 转
转http://vipnews.csdn.net/newscontent.aspx?pointid=2011_04_21_142132661 RemoteObjectAMF0是一个开源组件,可以很方便 ...
- MSP430常见问题之AD转换类
Q1:MSP430F149 AD 的输入阻抗有多大?A1:RC<2000欧*30PF Q2:MSP430 ADC12 模块的速度?A2: ADC12 的转换速率是转换所需的ADC12CLK 以及 ...
- (转载)Java NIO:NIO概述(一)
Java NIO:NIO概述 在上一篇博文中讲述了几种IO模型,现在我们开始进入Java NIO编程主题.NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题.本文下面分别从Java ...
- Socket编程初探
一.什么是Socket? 通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.在Internet上的主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个S ...
- 解决Jquery和prototype的兼容问题
1. 引入jquery 时,将jquery库在 prototype之前引入: 2.使用时: jQuery.noConflict(); // 这个要在 之前加上 3.初始化加载 (这里我试过,可以有两 ...