HTML笔记四,HTML5的绘图支持

使用canvas元素,相当于一张空的画布

height:设置画布组件高度

width:设置画布组件宽度

在canvas上绘图三个步骤:

①获取<canvas />元素对应的DOM对象,这是一个Canvas对象

②调用Canvas对象的getContext(‘2d’)方法,注意d是小写,该方法返回一个CanvasRenderingContext2D对象,该对象即可绘图

③调用CanvasRenderingContext2D对象的方法绘图

CanvasRenderingContext2D提供的方法:

arc:向Canvas的当前路径上添加一段弧

arcTo:同上

beginPath:开始定义路径

closePath:关闭定义路径

bezierCurveTo添加一段贝济埃曲线

clearRect:擦出指定矩形区域上绘制的图形

clip:从画布上裁剪出一块

createLinearGradient:创建一个线性渐变

createPattern:创建一个圆形平铺

createRadialGradient:创建一个圆形渐变

drawImage:绘制位图

drawImage(图片,目标X,目标Y);

drawImage(图片,目标X,目标Y,目标宽,目标高);

fill:填充当前路径

fillRect:填充一个矩形区域

fillText:填充字符串

lineTo:从当前结束点连接到指定点

moveTo:从当前结束点移动到指定点

quadraticCurveTo:添加一段二次曲线

rect:添加一个矩形

stroke:绘制边框

strokeRect:绘制一个矩形边框

strokeText:绘制字符串的边框

save:保存当前的绘图状态

restore:恢复之前保存的绘图状态

retate:旋转坐标系统

scale:缩放坐标系统

translate:平移坐标系统

CanvasRenderingContext2D提供的属性:

fillStyle:设置 填充 路径时所使用的填充风格

strokeStyle:设置 绘制 路径时所使用的填充风格

font:设置绘制字符串所使用的字体

globalAlpha:设置全局透明度

globalCompositeOperation:设置全局的叠加效果

lineCap:设置线段端点的绘制形状

lineJoin:设置线条连接点的风格(meter:直角连接,round:圆角连接,bevel:斜边连接)

miterLimit:当把lineJoin属性设为meter风格时,该属性控制锐角箭头的长度

lineWidth:设置笔触线条的宽度

shadowBlur:设置阴影的模糊度

shadowColor:设置阴影的颜色

shadowOffsetX:设置阴影在X方向上的偏移

shadowOffsetY:设置阴影在Y方向上的偏移

textAlign:设置字符串的水平对齐方式

textBaseAlign:设置字符串的垂直对齐方式

时间: 2024-10-12 12:56:58

HTML笔记四,HTML5的绘图支持的相关文章

HTML5的绘图支持

------>使用canvas元素 该元素专门用来绘制图形.但是它元素自身并不绘制图形,它只是相当于一张空画布,只是绘制图形的容器,必须使用JavaScript脚本来绘制图形. 为了向canvas画布上画图,必须经过如下的3个步骤: 1.获取canvas元素对应的DOM对象,这是一个Canvas对象. 2.调用Canvas对象的getContext()方法,该方法返回一个CanvasReaderingContext2D对象,该对象即可绘制图形. 3.调用CanvasReaderingContex

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向

html5 canvas绘图-贝塞尔曲线

贝塞尔曲线(ezier curve)最迟是由法国物理学家与数学家paul de Casteljau发明的.它的广泛运用则要归功于法国工程师皮埃尔 贝塞尔 贝塞尔曲线期初被用在汽车车身的设计上.现在则多用于计算机图形系统中.例如Adobe Illustrator/Apple的Cocoa框架以及在Html5的canvas. 贝塞尔曲线分为两种:平方(quadratic)贝塞尔曲线及立方(cubic)贝塞尔曲线.平方贝塞尔曲线是一种二次曲线(second degree curve),意思就是说,它们是

HTML5 Canvas 绘图入门

HTML5 Canvas 绘图入门 HTML5 Canvas 绘图入门,仅供学习参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h5 { text-align: center; } canvas {

R实战读书笔记四

第三章 图形入门 本章概要 1 创建和保存图形 2 定义符号.线.颜色和坐标轴 3 文本标注 4 掌控图形维数 5 多幅图合在一起 本章所介绍内容概括如下. 一图胜千字,人们从视觉层更易获取和理解信息. 图形工作 R具有非常强大的绘图功能,看下面代码. > attach(mtcars) > plot(wt, mpg) > abline(lm(mpg~wt)) > title("Regression of MPG on Weight") > detach(m

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

QT开发(十四)——QT绘图系统

QT开发(十四)--QT绘图系统 一.QT绘图原理 Qt4中的2D绘图系统称为Arthur绘图系统,可以使用相同的API在屏幕上和绘图设备上进行绘制,主要基于QPainter.QPainterDevice和 QPainterEngine.QPainter执行绘图操作,QPainterDevice提供绘图设备,是一个二维空间的抽象,QPainterEngine提供一些接口.QPainter用来执行具体的绘图相关操作,如画点,画线,填充,变换,alpha通道等.QPaintDevice类是能够进行绘

iOS9-by-Tutorials-学习笔记四:APP-瘦身

iOS9-by-Tutorials-学习笔记四:APP-瘦身 本文版权归作者所有,如需转载请联系孟祥月 CSDN博客:http://blog.csdn.net/mengxiangyue 独立博客:http://mengxiangyue.com 这篇文章在书中的标题是App Thinning,这里我给翻译成了App 瘦身. 本文然然进行了一些语法的修改,很开心她为我修改这些东西.她说我转折只会用但是,被她这么一说想想还真是只是会用但是,嘿嘿. iPhone经过这几年的发展,已经发生了很大的变化,例

初探swift语言的学习笔记四(类对象,函数)

作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/29606137 转载请注明出处 假设认为文章对你有所帮助,请通过留言或关注微信公众帐号fengsh998来支持我,谢谢! swift扩展了非常多功能和属性,有些也比較奇P.仅仅有慢慢学习,通过经验慢慢总结了. 以下将初步学习一下类的写法. 码工,最大爱好就是看码,而不是文字,太枯燥. // // computer.swift // swiftDemo // // C