[html5] 初识绘图canvas
这个星期被调到别的项目组专门做了一会儿前端,没办法,人太少,我也只能硬着头皮上...
说起来,html5的canvas真的好用,可以画色块,可以嵌入图片,可以通过定位在图片上写字等等
举例如下
在html中定义一个canvas,例如
<canvas id='my_canvas' width=300 height=150></canvas>
如果不显式定义width和height,那么canvas会用它默认的宽和高,分别是300,150.并且这里width和height是不带单位的哦有了这个canvas后,我们就可以在js中画图。
var canvas = document.getElementById('my_canvas');
//获得canvas对象
var ctx = canvas.getContext('2d');
//开始绘图
ctx.beginPath();
var width = canvas.width;
var height = canvas.height;
//把canvas轮廓勾出来
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, width, height);
ctx.closePath();
//在canvas画布正中间填充一个100*50的蓝色矩形
//offset_x和offset_y为相对于画布左上角的偏移量
var offset_x = (width - 100) / 2;
var offset_y = (height - 50) / 2;
ctx.fillStyle = 'blue';
ctx.fillRect(offset_x, offset_y, 100, 50);
ctx.closePath();
//在canvas左上角写一行字
ctx.beginPath();
ctx.font = '20px 微软雅黑';
ctx.strokeStyle = 'green';
ctx.textBaseline = 'top';
ctx.strokeText('一行白鹭上青天', 0, 0);
//在canvas右下角写一行字
ctx.fillStyle = 'red';
ctx.font = '12px FZFSJW—GB1-0';
var text = '小荷才露尖尖角';
var text_w = ctx.measureText(text).width; //字宽
offset_x = width - text_w;
offset_y = height - text_w / 7; //假设字体是方正的啦..
ctx.fillText(text, offset_x, offset_y);
效果如下:
当字体小于12px的时候,chrome浏览器会仍然以12px显示,所以当想要显示小字体的时候,一个方法就是利用canvas的scale方法,可以再建一个canvas专门用来放文字,然后通过z-index实现层叠的效果。
[html5] 初识绘图canvas的更多相关文章
- HTML5初识Canvas
HTML5初识Canvas <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5学习(四)---Canvas绘图
参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...
- HTML5中的canvas基本概念及绘图
* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(上)
前言 Android中绘图离不开的就是Canvas了,Canvas是一个庞大的知识体系,有Java层的,也有jni层深入到Framework.Canvas有许多的知识内容,构建了一个武器库一般,所谓十 ...
- Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(下)
LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...
- python 全栈开发,Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview)
昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...
随机推荐
- linux cpu load学习笔记
linux系统中的Load对当前CPU工作量的度量 Load Average 就是一段时间 (1 分钟.5分钟.15分钟) 内平均Load. [root@CNC-BJ-5-3N1 ~]# w 20:0 ...
- [bzoj1066] [SCOI2007] 蜥蜴 - 网络流
在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任何一个 ...
- bzoj1806 [Ioi2007]Miners矿工配餐
[bzoj1806][Ioi2007]Miners 矿工配餐 2014年7月10日1,7870 Description 现有两个煤矿,每个煤矿都雇用一组矿工.采煤工作很辛苦,所以矿工们需要良好饮食.每 ...
- 前端框架——AngularJS
前 言 AngularJS是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注 ...
- iOS开发注意事项(一)
1.OC的消息机制与C++等的函数(方法)有很大的不同,OC在运行时所执行的代码由运行环境来决定,而C++等则由编译器决定.如果调用的函数是多态的,C++在运行时要按照虚方法表来查出到底执行哪个函数, ...
- BZOJ-5055-膜法师(离散化+树状数组)
Description 在经历过1e9次大型战争后的宇宙中现在还剩下n个完美维度, 现在来自多元宇宙的膜法师,想偷取其中的三个维度为伟大的长者续秒, 显然,他能为长者所续的时间,为这三个维度上能量的乘 ...
- WebApi实现自定义错误日志
一.Mvc错误处理默认有添加HandleErrorAttribute默认的过滤器,但是我们有可能要捕捉这个错误并记录系统日志那么这个过滤器就不够用了,所以我们要自定义Mvc及Web Api各自的错误处 ...
- [#1] YCbCr与RGB的转换公式
1 YCbCr简介 YCbCr颜色空间是将RGB颜色空间进行坐标转换后得到的,常用于数字电视系统.Y取值范围:16~235 Cb.Cr的取值范围:16~240 YCbCr经常和YUV混淆.两者的主要差 ...
- linux_base_commond_one
1.cd commond a. cd usr 切换到该目录下usr目录 b. cd ../ 切换到上一层目录 c.cd / 切换到系统根目录 d. cd ~ 切换到用户主目录 e. cd - 切 ...
- Awesome Projects (汇聚全球所有🐮项目,你值得拥有)
Awesome Projects SkySeraph Oct 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.c ...