您现在的位置是:网站首页> 编程资料编程资料
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)html5中监听canvas内部元素点击事件的三种方法HTML5 创建canvas元素示例代码HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2021-09-01 1031人已围观
简介 HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Canvas一般是指画布,最近对用html5写游戏比较感兴趣,所以简单的用了一下Canvas。
之前接触Canvas是在silverlight和wpf上用到过他,在silverlight上Canvas是一个绝对定位的容器,里面可以放任何控件。我们通过他可以构建画布、图形应用、GIS应用等。
在html5中,canvas是一个新增的标签:
他有基本的html标签的所有属性,一样可以给他设置style。
他还有一个特定的attribute:
这里的height、width与以往的html标签的attribute不同,也与style中的height、width不同,这里主要是指canvas中的坐标范围。而style里的width、height是指canvas实际展示的大小。
比如定义下面的一个canvas:
然后在canvas中画一个坐标为 100、50,大小为200、150的矩形,你会看到实际的效果如下图:
图中 canvas的大小是通过style决定的 600px * 450px,但是填满整个canvas的坐标只是400*300, 对应着括号里的大小。
在canvas中画图是基于坐标的,所以100, 50的坐标转化成了150px,75px的屏幕坐标,矩形的大小也由200*150转换成300px*225px的屏幕大小。
你可以按照下面的代码自己试一试:
canvas的还有些其他attribute,还没有去看,他还有一个主要的方法,就是getContext(),这个方法就是获取画图的对象。
通过canvas的dom对象,可以调用getContext("2d")的方法获取对应的画图对象:
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
在开发者控制台里可以看到这个drawing2d的属性及方法:
包含了fillStyle、stokeStyle、lineCap、font等画笔样式类的属性,fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、stroke、fill、drawImage等画图动作的方法,还有一些其他的一些transfrom、save等方法。
简单说一下我看了的几个属性和方法,其他的需要自己去摸索哦:
fillStyle:填充样式,可以是颜色值的html码 如红色:#ff0000,其他是不是支持css3的更多属性就不知道了
strokeStyle:线条样式
font:字体样式
fillRect:function(x,y,width,height),直接按fillStyle填满一个矩形
strokeRect:function(x,y,width,height),直接按strokeStyle描一个矩形边
beginPath:开始画线,配合moveTo\lineTo\closePath等画折线或多边形
moveTo:function(x,y)将画线起点移动到新的坐标
lineTo:function(x,y)从当前点画的目标点
closePath:从当前点连接到起点
stroke:按照上面的路径按strokeStyle画折线
fill:按上面的路径按fillStyle画矩形
drawImage: function(image,x,y,width,height)将Image对象添加的画布上。注意这里的image对象必须是已经加载完毕的。如 var img = new Image();img.src="test.png";img.onload = function(){/*在这里才能将image添加到画布*/}
可以看下上面画矩形的方法:
context.fillRect(100,50,200,150);
画一条折线:
context.beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(110,10);
context.closePath();
context.stroke();
canvas具有绘图的功能,但是在用户交互上似乎比较乏力。拿silverlight的canvas、.NET的Bitmap、html的div与canvas对比了一下:
个人感觉canvas和Bitmap更像,是一个将Bitmap放到浏览器端的一个版本,当然我们可以通过他来实现更多的功能。canvas本身能实现的还是比较少,但是配合现有的其他浏览器端应用的技术肯定能创造出更多好的应用。
相关内容
- html5图片上传预览示例分享基于HTML5 Bootstrap 3.x可预览的文件上传特效源码HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码jQuery+html5图片上传并裁切预览 php版 v1.0 带有图片预览功能的上传表单的完整HTML基于HTML实现多图上传预览功能
- HTML5 Canvas锯齿图代码实例HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
- HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)Canvas制作旋转的太极的示例canvas绘制太极图的实现示例
- 使用javascript和HTML5 Canvas画的四渐变色播放按钮效果html5 canvas实现交互式彩色渐变背景动画特效源码html5 canvas绘制的圆形气泡渐变背景动画特效源码HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例HTML5 canvas实现渐变色圆形进度条特效源码html5使用canvas实现的圆形渐变进度条加载动画特效源码html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法html5 canvas绘制放射性渐变色效果
- HTML5的自定义属性data-*详细介绍和JS操作实例详解HTML5 data-* 自定义属性HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)全面解析HTML5中的标准属性与自定义属性html5的自定义data-*属性与jquery的data()方法的使用HTML5自定义data-* data(obj)属性和jquery的data()方法的使用HTML5自定义属性的问题分析
- 使用jquery实现HTML5响应式导航菜单教程css3与html5实现响应式导航菜单(导航栏)效果分享
- 简单html5代码获取地理位置HTML5地理定位_动力节点Java学院整理HTML5实现获取地理位置信息并定位功能HTML5地理定位实例h5实现获取用户地理定位的实例代码
- HTML5注册页面示例代码html5实现的表单注册进度条提示特效源码HTML5实现的手机登录注册表单特效源码HTML5实现的分步骤注册表单源码html5+css3+jQuery实现现代感的时尚web注册表单效果HTML5注册表单的自动聚焦与占位文本示例代码html5+css3实现一款注册表单实例 Html5实现用户注册自动校验功能实例代码
- html5实现微信打飞机游戏HTML5实现手机端开心消消乐微信游戏特效源码HTML5实现手机端微信游戏圣诞老人过桥特效源码html5实现的手机微信疯狂抢红包小游戏源码html5和php实现微信小游戏智力撑杆源码基于html5实现微信朋友圈接水果小游戏特效源码基于html5实现的疯狂打企鹅微信小游戏特效源码HTML5仿手机微信摇一摇游戏特效源码HTML5+Canvas实现飞机加速减速特效源码
- html5 canvas fillRect坐标和大小的问题解决方法html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法