【转】canvas初探
0,canvas一些初始化操作
html:
<!--
在html里写入canvas标签
宽高必须设置
还可以设置其他css样式
canvas标签内写入浏览器不支持canvas标签时应该显示的文字
-->
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
js:
//通过id获取canvas元素对象
var mycanvas=document.getElementById('myCanvas');
//通过canvas获取上下文 这里我们选择2d
var context = mycanvas.getContext('2d');
通过如上设置,我们就可以在canvas上用js作画了!
1,画弧(圆)
//开始路径
context.beginPath();
//画圆(圆心x坐标,圆心y坐标,半径,开始弧度,结束弧度,顺时针还是逆时针)
context.arc(100, 100, 50, 0, 2*Math.PI, false);
//描边 或者填充 context.fill();可以设置 context.fillStyle或者context.strokeStyle。只有执行了此步才能在canvas里显示图形
context.stroke();
2,画直线
context.beginPath();
//把坐标移到目标位置
context.moveTo(100,150);
//开始画线
context.lineTo(100,250);
//描边
context.stroke();
3,填充方块
//绘制填充颜色的矩形
context.fillStyle = "rgba(200,0,0,1)";
context.fillRect(300,300,50,50);
//绘制带有边框的矩形
strokeRect(x,y,width,height);
//清空绘制的矩形区域,并使之透明;
clearRect(x,y,width,height);
4,文字
context.strokeStyle = 'black'; //描边样式
context.lineWidth = 1; //描边宽度
context.fillStyle = '#00f'; //填充样式
context.font = 'normal 30px sans-serif'; //字体设置
context.textBaseline = 'top'; //HTML画布垂直对齐的文本,我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一 :top, hanging, middle, alphabetic, ideographic, and bottom。
context.fillText ('Hello canvas!', 200, 0); //填充出来的文字
context.strokeText('忍', 200, 50); //描边出来的文字(空心)
5,贝塞尔曲线
//二次贝塞尔曲线
context.moveTo(400,400);
context.quadraticCurveTo(450,350,500,400); //设置基准点坐标和终点坐标
context.stroke();
//三次贝塞尔曲线
context.moveTo(500,500);
context.bezierCurveTo(500,350,550,550,600,600);//设置两个基准点坐标和终点坐标
context.stroke();
基准点不同可以有不同的曲线效果:
博客来源:http://hi.baidu.com/shawn_html5/item/580ac61f6764eddd65eabfb7 by 谢帅shawn
转载于:https://www.cnblogs.com/GeekHacker/archive/2012/06/24/2560021.html
【转】canvas初探相关推荐
- canvas初探 —— 实现手机壳效果(适用于移动端)
前言 很久没写博客,辞职了一段时间换了一份工作,没有了大屏幕写起来不方便就不想写了哈哈,这段时间学习完了ES6,Node的一些基础,近期在学习vue,但感觉不是很扎实,准备第二次学习的时候再做记录. ...
- canvas初探实践-第二篇
前言 本文分享了canvas的文本操作,图片操作,像素操作,对图片实现类似ps功能操作,其它API. 文本操作 探索文本操作,只需简单记住如何操作文本的方法.属性的API. 方法: 方法 说明 fil ...
- canvas入门初探—实现人物移动动画
前言 之前两篇文章讲了一些canvas基础入门的知识点和一下小案例如下: Canvas初探入门- 基础图形的绘制 Canvas初探入门-实现鼠标画板 这一篇通过案例实现人物移动动画,下面一起来看看 实 ...
- 分享Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月18日-6月24日)
分享Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月18日-6月24日) 本周Silverlight学习资源更新 Silverlight读取与设置Cookies 任 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(3月26日-3月31日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(3月26日-3月31日) 本周Silverlight学习资源更新 Silverlight性能优化纪要-原作者Jo ...
- 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面
弧度一块可能有误,需要再研究 导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上 ...
- canvas 嵌套_canvas初探
canvas怎样设置宽高?有几种方式? canvas 画布默认宽300px 高150 px HTML宽高 <canvas id="canvas"width="400 ...
- html5初探ppt,HTML5---HTML5初探151019解析.ppt
HTML5---HTML5初探151019解析 * HTML5新增的元素 新增的结构元素 section.article.aside.header.hgroup.footer.nav.figure 新 ...
- 【CSS3初探之变形与动画】令人惊叹的CSS3
前言 这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...
- Android中实现Launcher功能之四---滑屏初探 scrollTo 以及 scrollBy方法使用说明
本文原创 ,转载必须注明出处 :http://blog.csdn.net/qinjuning 今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中 ...
最新文章
- 建立实体-关系模型3
- linux hosts文件如何修改_如何修改hosts文件?让你简单方便快捷管理
- 解决Linux中java.net.UnknownHostException: oracledb.sys.iflashbuy.com问题
- 汇编:以字符形式给出数据
- phpcms避免字段值重复
- 分享:session定义使用和丢失问题小结
- 围成一圈的排列组合问题_分班必考知识点!小学奥数之排列组合问题
- linux技巧----查找某个正在执行的脚本
- 解决matlab2018a安装后遇到matlab license manager error -8
- Raffi Krikorian 为“在运行中进行架构重写”提供了指南
- cfiledialog 保存 扩展名_吃不完的红薯很难保存?教你一招,放1年不烂不发芽,简单实用...
- python全栈测试题(一)
- httpd-2.4.18源码安装
- 32bit还是64bit
- 【图像分割】基于matlab C-V模型水平集图像分割【含Matlab源码 1456期】
- matlab output()函数,matlab 函数y=f(input,output)该如何实现?
- tomcat启动成功但没有跳转到浏览器,已解决
- 创意=流量!“蔡徐坤”被“鸡你太美” 这款游戏蹭量霸榜!
- Adams/Car和Matlab联合仿真
- Windows下通过 Uboot TFTP 方式下载和启动rt-smart 内核
热门文章
- whisper客服源码_以太坊源码分析—Whisper
- 大多数Nobody游戏下载(带象棋残局攻略) 中文破解版
- 会考计算机基本知识点总结,高中计算机会考基本知识点
- #.net在技术上远超Java,可是为什么大多数公司还是选择使用Java
- 网吧游戏更新与保护解决方案
- Linux unison 效率,Linux中inotify+unison实现数据双向(多向)实时同步
- User does not have the ‘LOCK TABLES‘ privilege required to obtain a consistent snapshot by preventin
- CVPR2022论文速递(2022.4.15)!共16篇!内含2篇Oral!
- DFI、DPI、端口识别技术
- 名词性从句引导词的基本用法