html canvas 绘图,html绘制到canvas
一、什么是Canvas
Canvas是H5的一部分，它允许脚本语言动态渲染图像。Canvas定义了一个区域，其宽度和高度可以由html属性定义。javascript代码可以访问这个区域，并通过一套完整的绘图函数(API)在网页上进行动态渲染。
二、Canvas 能做什么
游戏：毫无疑问，游戏在HTML5中扮演着重要的角色。在基于Web的图像显示中，HTML5比Flash更加立体细腻。
图表制作：图表制作往往被人们所忽视，但企业内部和企业之间的沟通与合作都离不开图表。现在有些开发者用HTML/CSS做图标。当然，使用SVG(可缩放矢量图形)来完成图表制作也是一个非常好的方法。
字体设计：使用基于Web的HTML5技术完全可以实现字体的自定义渲染。
图形编辑器：图形编辑器可以100%基于网络。
其他可以嵌入网站的内容：类似于图表、音频、视频，有很多元素可以更好的与web结合，不需要插件。
三、Canvas基本用法
1.使用canvas时，必须先设置其宽度和高度属性，指定可绘制区域的大小，并且只指定宽度和高度。如果您不添加样式或绘制图像，您将不会在页面中看到该元素。
画布ID= draw width= 200 px height= 200 px /Canvas 2。要绘制图像，我们必须首先获取画布并调用getContext()方法，然后传入上下文名称(2D/3D)。2D fillStyle) strokeStyle)，有两个基本的绘图操作。
var draw=document . getelementbyid( draw )；//确认浏览器是否支持canvas元素if(draw . get context){ var context=draw . get context( 2D )；//为context context . stroke style= # f00 绘制红色边框；//context . fill style= # 0f 0 内部填充的草原的颜色；}3.使用toDataURL()方法，可以导出绘制在画布上的图像元素。
var draw=document . getelementbyid( draw )；If(draw.getContext){ //显示图像，toDataURL()得到一个字符串base64 vardrawurl=draw . toda taurl( image/png )；var image=document . createelement( img )；image.src=drawURLdocument . body . appendchild(image)；}4.画矩形主要有三种方法，fillRect()是矩形填充颜色，strokeRect()是矩形描边，clearRect()清除矩形。这三种方法都接收四个参数x/y/w/h、矩形左上角的坐标以及宽度和高度。
var draw=document . getelementbyid( draw )；//确认浏览器是否支持canvas元素if(draw . get context){ var context=draw . get context( 2D )；//用绿色笔画context.fillStyle=#f00 画一个红色矩形；context . stroke style= # 0f 0 ；context.strokeRect(10，10，50，50)；context.fillRect(10，10，50，50)；//用红色笔画context.fillStyle=#0f0 画一个绿色矩形；context.strokeStyle= # f00context.strokeRect(10，10，50，50)；context.fillRect(10，10，50，50)；//清除两个矩形重叠的小矩形context.clearRect(40，40，10，10)；}5.绘制路径，可以创建复杂的形状和线条。要绘制路径，首先调用beginPath()方法，然后通过以下方法绘制路径。
圆弧(x，y，半径，起始角度，终止角度，逆时针方向)
(x，y)中心坐标，半径半径，(开始角度，结束角度)开始角度和结束角度，逆时针顺时针(假)/逆时针(真)
Move (x，y)将光标移动到(x，y)而不绘制直线。可用于修改所谓的最后一点坐标*
arcTo(x1，y1，x2，y2，半径)
从前一个点到(x2，y2)画一条曲线，以给定的半径穿过(x1，y1)。
LineTo(x，y)从前一点到(x，y)画一条直线
rect(x，y，宽度，高度)
从(x，y)画一个矩形，有宽度和高度。此方法绘制一个矩形路径，而不是由strokeRect()和fillRect()绘制的独立形状。
//接下来画一个不带数字的时钟vardraw=document . getelementbyid( draw )；if(draw . get context){ var context=draw . get context( 2d )；//启动路径context . begin path()；//画外圆context.arc (100，100，99，0，2 * math.pi，false)；//画内圆context.moveTo(194，100)；context.arc(100，100，94，0，2 *数学。圆周率，假)；//画分针context.moveTo(100，100)；context.lineTo(100，15)；//画时针context.moveTo(100，100)；context.lineTo(35，100)；//stroke路径context . stroke()；context.strokeStyle= # f00}6.要绘制文本，有两个主要方法，filltext()和stroketext()，它们都接收四个参数text xy maximum pixel width(可选)。这两种方法基于以下三个属性。
字体风格、大小、字体等
文本对齐文本对齐开始结束左右居中
文本基线文本的基线顶部悬挂中间字母表意底部
//在表盘上画12点context.font= bold 12px Arialcontext.textAlign= centercontext.textBaseline= middlecontext.fillText(12 ，100，20)；7.转换
旋转(角度)围绕原点旋转图像角度弧度。
Scale(scaleX，scaleY)缩放图像，x*scaleX，y*scaleY默认为1。
Translate(x，y)将坐标原点移动到(x，y)
var draw=document . getelementbyid( draw )；if(draw . get context){ var context=draw . get context( 2d )；//启动路径context . begin path()；//画外圆context.arc (100，100，99，0，2 * math.pi，false)；//画内圆context.moveTo(194，100)；context.arc(100，100，94，0，2 *数学。圆周率，假)；//转换原点context.translate(100，100)；//旋转指针context.rotate(1) //绘制分针context.moveTo(0，0)；context.lineTo(0，-85)；//画时针context.moveTo(0，0)；context.lineTo(-65，0)；//stroke路径context . stroke()；context.strokeStyle= # f00} 8.绘制图像，drawImage()
var img=document . getelementbytagnames( image )[0]；context.drawImage(img，0，10，50，50，0，100，40，60)；9个参数：要绘制的原始图像xywh目标图像xywh
9.阴影和渐变
阴影主要是以下属性值
ShadowColor shadowOffsetX: X轴阴影偏移shadowOffsetY: Y轴阴影偏移shadowBlur:模糊像素数，默认为0，无模糊var context=draw . get context( 2d )；//设置阴影上下文. shadowcolor= rgba (210，210，210，0.5)；context.shadowOffersetX= 5Gradient创建一个新的线性梯度createLinearGradient()方法，有四个参数x1y1x2y2分别是起点的坐标和终点的坐标var gradient=context . createlaneragradient(30，30，70，70)；gradient.addColorStop(0， # fff )；//0表示gradient.addColorStop(1， #000 )的开始；//1表示结束//使用定义的渐变属性context.fillStyle=gradient//填充时放渐变context.fillRect(30，30，50，50)；使用六个参数创建径向渐变createRadialGradient()，这六个参数分别是第一个中心和第二个中心以及半径。用法与线性渐变相同。
10.使用图像数据，可以通过getImageData()获取原始图像数据。四个参数xywh。每个ImageData对象有三个属性，width/height/Data，data是一个数组，数组中存储了每个像素的数据，每个元素的值在0到255之间。
变量img数据=上下文。getimagedata(0，0，100，100)；var data=imgdata.data，红色=data[0]，绿色=data[1]，蓝色=data[2]，alpha=data[3]；//实现一个灰色过滤器var draw=文档。getelementbyid( draw )；如果(画。获取上下文){ var context=draw。获取上下文(“2d”)；var img=文档。getelementsbytagname( image )[0]，imageData，Data，I，len，average，red，green，blue，alpha//绘制原始图像context.drawImage(img，0，0，100，100)；//获取图像数据imageData=上下文。getimagedata(0，0，img.width，img。身高)；data=imageData.datafor(i=0，len=data . length ileni=4){ red=data[I]；绿色=数据[I 1]；蓝色=数据[I2]；alpha=数据[i3]；//计算rgb的平均值average=Math.floor(红绿蓝)/3);//设置颜色值data[i]=平均值；数据[i 1]=平均值；数据[I ^ 2]=平均值；} imageData.data=data//把数据绘制在画布context.putImageData(imageData，0，0)}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。