百科狗-知识改变命运!
--

html5 绘图 - html5 详细教程

乐乐1年前 (2023-11-21)阅读数 11#技术干货
文章标签路径

html5 绘图

版本:HTML5

HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常,但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等

HTML5标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

创建一个画布,一个画布在网页中是一个矩形框,通过元素来绘制。默认情况下 元素没有边框和内容。标签通常需要指定一个id属性 (脚本中经常引用),width和height属性定义的画布的大小,使用style属性来添加边框。你可以在HTML页面中使用多个元素

HTML

JS

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

效果

     var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");   ctx.fillStyle="#FF0000";   ctx.fillRect(0,0,150,75);

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。设置 fillStyle 属性可以是CSS颜色,渐变,或图案。fillStyle默认设置是#000000(黑色)。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

canvas 的历史

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的 东西都绘制到一块画布上。

canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。

我们甚至可以在 IE 中使用 canvas 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。

canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 canvas 已经成为 HTML 5 草案中一个正式的标签。

canvas 标记和 SVG 以及 VML 之间的差异

canvas 标记和 SVG 以及 VML 之间的一个重要的不同是,canvas 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容 易编辑,只要从其描述中移除元素就行。

要从同一图形的一个 canvas 标记中移除元素,往往需要擦掉绘图重新绘制它。

使用 canvas 标记绘制简单图形

大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。

一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 标签的属性及方法。
注意:Internet Explorer 8 及更早的IE版本不支持 元素。

canvas API

方法 / 属性使用方法描述
getContext()var canvas =
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
获取绘制环境
返回一个用于在画布上绘图的环境。
save()ctx.save(); 绘制状态
保存路径
restore()ctx.restore(); 绘制状态
恢复路径
scale()ctx.scale(x, y);
//x轴缩放比例|y轴缩放比例
转换
缩放
rotate()ctx.rotage(radian);
//radian 弧度=角度*Math.PI/180
转换
旋转角度
translate()ctx.translate(x, y);
//x轴的位移|Y轴的位移
转换
偏移
transform()ctx.transform(a, b, c, d, e, f);转换
变换
setTransform()ctx.setTransform(a, b, c, d, e, f); 转换
设置变换
globalAlphactx.globalAlpha = 0.8; 转换
透明度
globalCompositeOperationctx.globalCompositeOperation = ""; 转换
透明度
fillStylectx.fillStyle = "#ff0000";颜色和边框
设置绘图的背景颜色
strokeStylectx.strokeStyle = "blue";颜色和边框
在绘制的图形上添加边框颜色
addColorStop()ctx.addColorStop(offset, color)
//offset 位置|color 颜色值
颜色和边框
在绘制的图形上添加边框颜色
createLinearGradient()ctx.createLinearGradient(x,y,w,h);
//x轴位置|y轴位置|渐变宽度|渐变高度
颜色和边框
创建一个渐变
createRadialGradient()ctx. createRadialGradient
(x0, y0, r0, x1, y1, r1);
颜色和边框
在绘制的图形上添加边框颜色
createPattern()ctx.createPattern
(img, repeatition);
//img 图片对象
//repeatition 平铺方式
颜色和边框
在绘制的图形上添加边框颜色
lineWidthctx.lineWidth = 10;边界
设置绘制的图形边框
lineJoinctx.lineJoin = "round";
//3种格式miter|round|bevel
//默认|圆角|斜角
边界
设置绘制的图形的辩解样式
lineCapctx.lineCap = "round";
//3种格式 butt|round|square
//默认|圆角|高度多出线宽的一半
边界
设置绘制的图形的辩解样式
miterLimitctx.miterLimit = ""; 边界
边框斜切限制
shadowColorctx.shadowColor = "red"; 投影
投影颜色
shadowOffsetX ctx.shadowOffsetX = 10; 投影
投影的水平位移
shadowOffsetYctx.shadowOffsetY = 10; 投影
投影的垂直位移
shadowBlurctx.shadowBlur = 10; 投影
投影的模糊大小
fillRect()ctx.fillRect(x,y,w,h); 绘制矩形
在画布上填充黑色背景
strokeRect()ctx.strokeRect(x,y,w,h);绘制矩形
在画布上绘制一个带边框的矩形
clearRect()ctx.clearRect(x,y,w,h);绘制矩形
清除指定范围内的内容
beginPath()function draw(){
beginPath();
closePath();
}
绘制路径
开始绘制一个新的路径,避免与后面绘制的路径重叠,在填充或者话边框的时候就会出现问题。 在绘制好路径之后用closePath() 来关闭路径;如果在填充路径时没有关闭,那么context就会自动调用closePath关闭路径。
closePath()代码同上绘制路径
关闭路径,如果不设置最后一个点,则默认以第一个点结束。
moveTo()ctx.moveTo(120, 120);//x, y绘制路径
移动到绘制的新目标点,设置一个新的点
lineTo()ctx.lineTo(220, 320);//x, y绘制路径
新的目标点
quadraticCurveTo()ctx.quadraticCurveTo
(cpx, cpy, x, y);
//贝赛尔曲线 控制点|坐标点
绘制路径
新的目标点
bezierCurveTo()ctx. bezierCurveTo
(cp1x, cp1y, cp2x, cp2y, x, y);
//贝赛尔曲线 控制点|控制点|坐标点
绘制路径
新的目标点
arc()ctx.arc(x, y, r, s, e, d);
//x,y,半径,起始弧度,结束弧度,旋转方向
//旋转方向:false[顺时针],true[逆时针]
绘制路径
画一个圆
arcTo()ctx.arc(x1, y1, x2, y2, r);
//第一组坐标|第二组坐标|半径
绘制路径
画一个圆
rect()ctx.rect();
//x,y,w,h
绘制路径
绘制一个矩形
fill()ctx.fill();
//填充,默认黑色
绘制路径
把lineTO()设置的点区域用默认颜色填充成一个图形
stroke()ctx.stroke();
//画线,默认黑色
绘制路径
把lineTO()设置的点连接起来
clip()ctx.clip();绘制路径
isPointInPath()ctx.isPointInPath();绘制路径
drawFocusRing()ctx.drawFocusRing
(ele, canDrawCustom);
集中管理
setCaretSelectionRect()ctx.setCaretSelectionRect
(ele, x, y, w, h);
插入符和选择器管理
caretBlinkRate()ctx.caretBlinkRate() 插入符和选择器管理
fontctx.font="" 文本
设置字体类型
textAlign = ""ctx.textAlign = ""
//start, end, left, right, center
//def:start
文本
文本对齐方式
textBaselinectx.textBaseline=""
//def:alphabetic
文本
fillText()ctx.fillText
(text, x, y[, maxWidth ])
文本
设置填充的文本
strokeText()ctx.strokeText
(text, x, y[, maxWidth ])
文本
measureText()var metrics =
ctx.measureText(text);
metrics . width
文本
drawImage()drawImage(image,dx,dy)
drawImage(image,dx,dy,dw,dh)
drawImage(image,sx,sy,sw,sh,
dx,dy,dw,dh)
图片操作
在画布上载入一张图片
createImageData()createImageData(sw,sh) 图片操作
createImageData()createImageData(imageData) 图片操作
getImageData()var imageData =
createImageData(sx,sy,sw,sh)
imageData.width
imageData.height
imageData.data
图片操作
putImageData()putImageData(imageData,dx,dy[,
dirtyX,dirtyY,dirtyWidth,
dirtyHeight])
图片操作
绘制模型

Canvas - 路径

html5 绘图 - html5 详细教程

在Canvas上画线,我们将使用以下两种方法:

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法,就像stroke()。

 var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke(); 

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条

Canvas - 文本

使用 canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心)

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
  • addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1

使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

创建了一个线性渐变,使用渐变填充矩形

Canvas - 图像

把一幅图像放置到画布上, 使用drawImage(image,x,y)方法

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

把一幅图像放置到了画布上

SVG 与 Canvas两者间的区别

  • SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
  • SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
  • Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)