canvas drawtext,
drawImage()是一个很关键的方法，它可以引入图像、画布、视频，并对其进行缩放或裁剪。
一共有三种表现形式：
语法一
Java Script语言代码复制内容到剪贴板context.drawImage(img，dx，dy)；语法2
Java Script语言代码复制内容到剪贴板context.drawImage(img，dx，dy，dw，dw)；语法3
Java Script语言代码复制内容到剪贴板context.drawImage(img，sx，sy，sw，sh，dx，dy，dw，DH)；来看一下坐标草图：
PS:不要在样式中定义帆布的宽和高，否则，里面所画的图片会自动放大或者缩小。
三参数的是标准形式，可用于加载图像、画布或视频；五参数的除了可以加载图像还可以对图像进行指定宽高的缩放；九参数的除了缩放，还可以裁剪。各参数意义见下表。参数描述img sx可选。开始剪切的x坐标位置100 .00 sy可选。开始剪切的y坐标位置swidth可选。被剪切图像的宽度100 .她没事可选。被剪切图像的高度10 .x在画布上放置图像的x坐标位置10 .y在画布上放置图像的y坐标位置宽度。可选。要使用的图像的宽度。(伸展或缩小图像)身高要使用的图像的高度。(伸展或缩小图像)
下面，我们加载一个图片试试。
Java Script语言代码复制内容到剪贴板！doctype html html lang= zh head meta charset= UTF-8 titledrawImage()/title style body { background:URL( ./images/bg3 . jpg’)重复；} # canvas { border:1px solid # aaaaaa；显示：块；保证金：50pxauto }/style/head body divid= canvas-warp canvasid= canvas 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；语境。填充样式= # FFF ；context.fillRect(0，0，800，600)；varimg=new image()；img.src= ./images/20-1。jpg ；img。onload=function(){ context。绘制图像(img，200，50)；} };/script /body /html运行结果：
创建相框：
这里，我们结合夹子()和drawImage()以及三次贝塞尔曲线bezierCurveTo()，来为上面一个案例，加上一个心形的相框~
Java Script语言代码复制内容到剪贴板！DOCTYPEhtml htmllang=zh head元字符集=UTF八号标题绘制心形相框/title style body{background:url( ./images/bg3 . jpg’)重复；} # canvas { border:1px solid # aaaaaa；显示：块；保证金：50pxauto }/style/head body divid= canvas-warp canvasid= canvas 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；语境。填充样式= # FFF ；context.fillRect(0，0，800，600)；语境。begin path()；context.moveTo(400，260)；context.bezierCurveTo(450，220，450，300，400，315)；context.bezierCurveTo(350，300，350，220，400，260)；context.clip().语境。关闭路径()；varimg=new image()；img.src= ./images/20-1。jpg ；img。onload=function(){ context。绘制图像(img，348，240，100，100)；} };/script /body /html运行结果：
是不是很美？好了，到目前为止，最关键的蒙版和图像裁剪完成了。其实在java.awt中，drawImage()也是一个至关重要的方法。有人说如果你会做Java游戏界面，只要会用drawImage()，就可以玩遍全世界了~在Canvas里也一样。美工提供的素材基本都是图片，这时候drawImage()处理图片就很重要了。即使是基本功，也是图片最重要的处理方法。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。