<html5 canvas>一个简单的矩形
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Rectangle</title>
- <style>
- body{
- background:#dddddd;
- }
- #canvas{
- background:#eeeeee;
- border:1px solid #000000;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="600" height="400">
- Canvas not supported
- </canvas>
- <script src="rectangle.js"></script>
- </body>
- </html>
javascript:
- // JavaScript Document
- var canvas=document.getElementById('canvas'),
- context=canvas.getContext('2d');
- context.lineJoin='round';
- context.lineWidth=30;
- context.font='24px Helvetica';
- context.fillText('Click anywhere to erase',175,40);
- context.strokeRect(75,100,200,200);
- context.fillRect(325,100,200,200);
- context.canvas.onmousedown=function(e){
- context.clearRect(0,0,canvas.width,canvas.height);
- };
js代码的大概结构为：
1. 使用document.getElementById()方法来获取指向canvas的引用。
2. 在canvas对象上调用getContext('2d')方法，获取绘图环境变量。
3. 然后通过绘图环境对象在canvas元素上进行绘制。
代码的前两行基本上是固定的。
lineJoin: 当两条线交汇时创建边角类型。
属性值：beval（斜角），round（圆角），miter（尖角，默认）。
lineWidth: 设置线条宽度，默认为1。
fillText(): 参数（按顺序）：要输出的文本，x坐标，y坐标，允许的最大文本宽度。
strokeRect(): 参数：x坐标，y坐标，宽度，高度。作用：为矩形描边，用strokeStyle, lineWidth, lineJoin, MiterLimit属性。
fillRect(): 参数同上。作用：填充矩形，用fillStyle属性。
clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。
<html5 canvas>一个简单的矩形的更多相关文章
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- [HTML5] Canvas绘制简单形状
使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...
- HTML5<canvas>标签:简单介绍(0)
<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...
- 学习HTML5, Canvas及简单动画的使用
通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...
- [HTML5] Canvas绘制简单图片
获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...
- canvas一个简单粗暴的中奖转盘
最近在学canvas做动画,于是就写个转盘练下手.上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈) 代码很简单,都注释了,直接上代码吧,嘤嘤嘤 html <body> ...
- html5 canvas 一个漫天飞雪的效果
很棒的下雪效果 代码奉上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
随机推荐
- Java继承改进
一.java继承改进 首先,多继承的缺点: 1.继承多个父类,父类中方法名相同,产生歧义 2.父类中方法同名,子类未覆盖,也会歧义 所以,java改进,类只能单继承,接口可以多继承 接口中只有抽象方法 ...
- Visual Studio 2015 实用插件推荐
-1000.EntityFramework Reverse POCO Generator(EF Code First 的必备神器) Reverse engineers an existing data ...
- 自动布局库--Masonry使用
参考资料(戳这里): > Masonry官网 > Masonry介绍与使用实践(快速上手Autolayout) > iOS 开发实践之 Auto Layout > Ma ...
- sql单列合并
有一组这样的数据 1 a 10 2 b 2 4 c 5 1 a 5 在应用中,我们可能需要把出现a的数据合并显示: 1 a 10,5 sqlite上实现: SELECT ...
- git 使用流程 命令
克隆远程分支到本地 git clone <https://github.com/cqzyl/methods.js.git> 进入master分支 git checkout master 以 ...
- 如何从MYSQL官方YUM仓库安装MYSQL5.x 原理一样只要获取对的仓库依赖安装对的仓库依赖就ok了，我就是用这种安装的5.7
如何从MYSQL官方YUM仓库安装MYSQL5.6 2013年10月,MySQL开发团队正式宣布支持Yum仓库,这就意味着我们现在可以从这个Yum库中获得最新和最优版的MySQL安装包.本文将在一台全 ...
- Vue打包后页面出现cannot get
学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...
- Spring+Hibernateh使用小结
由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to load class ’org.slf4j.impl.StaticLoggerBinder‘”的意思则是“加 ...
- silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来.(当然控件上的值改变后,可以通过提交页面表单,同时后台服务端代码接收新值更新数据) silv ...
- grafana快速入门
入门 本指南将帮助您开始并熟悉Grafana.它假定您有一台正在运行的Grafana服务器,并至少添加了一个数据源. 初学者指南 观看10分钟的初学者指南,以建立仪表板,以快速介绍设置仪表板和面板. ...