Ⅰ 前端笔记 — canvas
在HTML中添加<canvas>元素，必须设置width跟height属性
如果浏览器不支持canvas元素，就会显示标签中间的内容
要在画布上绘图，需要取得绘图上下文，调用getContext('2d')就可以取得canvas的2d上下文
使用toDataURL方法可以导出canvas上绘制的图像，接受一个参数，图像的MIME类型格式
常用的属性控制
矩形是唯一一种可以直接在上下文中绘制的形状
与矩形有关的方法包括fillRect()、strokeRect()和clearRect()，这三个方法接受4个参数（x, y, width, height）
fillRect()绘制的矩形会填充指定的颜色，颜色通过fillStyle属性指定
strokeRect()绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性指定
clearRect()方法用于清除画布上的矩形区域
要绘制路径，首选必须调用beginPath()方法，表示开始绘制新路径，绘制路径主要有以下方法
调用closePath()可以将路径的起点与终点连接。路径完成后，可以使用fill()填充，或者使用stroke()描边。最后还可以调用clip()，在路径上创建一个剪切区域
绘制文本主要有两个方法，fillText()和strokeText()，这个两个方法接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。这两个方法都以下列3个属性为基础
上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，这个对象有一个width属性，表示文本的宽度
为上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果，可以通过如下方法来修改变换矩阵
如果想把一副图像绘制到画布上，可以使用drawImage()方法，调用这个方法时，可以使用三种不同的参数组合，最简单的方式是传入一个<img>元素，以及绘制该图像的起点x和y坐标
可以多传入两个参数，表示目标宽度和高度
还可以把图像中的某个区域绘制到上下文中，需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度
除了给drawImage()方法传入<img>元素外，还可以传入另一个<canvas>元素作为其第一个参数。结合drawImage()和其他方法，可以对图像进行各种基本操作，操作的结果可以通过toDataURL()方法获得，toDataURL()是canvas的方法而不是上下文的方法
上下文会根据以下几个属性，自动为形状或路径绘制阴影，需要在绘制路径之前设置
渐变有CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法，接受4个参数：startX、startY、endX、endY。创建渐变后，使用addColorStop()方法来指定色标，接受两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字
表示从一个画布上的点(30, 30)到点(70, 70)的渐变。起点的色标是白色，终点的色标是黑色。然后可以把fillStyle或者strokeStyle设置为这个对象，从而使用渐变来绘制形状或描边
要创建径向渐变，可以使用createRadialGradient()方法，接受6个参数，对应着两个圆的圆心和半径
模式其实就是重复的图像，可以用来填充或描边图像，使用createPattern()方法并传入两个参数：一个<img>元素和一个表示如何重复图像的字符串。其中第二个参数的值与css的background-repeat属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”
模式与渐变一样，都是从画布的原点(0, 0)开始的，将填充样式设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复图像
上下文可以通过getImageData(x, y, width, height)取得原始图像数据
这里返回的对象是ImageData的实例，每个ImageData对象都有三个属性：width、height和data。其中data是一个数组，保存着图像中每一个像素的数据。
在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度。因此第一个像素的数据保存在数组的第0到第3个元素中，数组中的每个元素的值都介于0到255之间（包括0和255）
putImageData()方法可以将imageData表示的图像绘制到画布上
globalAlpha：用于指定所有绘制的透明度，是一个介于0到1之间的值，默认值为1
如果所有的后续操作都要基于相同的透明度，可以先把globalAlpha设置为适当的值，然后绘制
globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合，可能的值如下
Ⅱ HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图
<imgsrc="......."id="img1"/>
<imgsrc="......."id="img2"/>
<imgid="img3"/>
varimg1=document.getElementById("img1"),
img2=document.getElementById("img2"),
img3=document.getElementById("img3");
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=img1.naturalWidth+img2.naturalWidth;
canvas.height=Math.max(img1.naturalHeight,img2.naturalHeight);
//将img1加入画布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);
//将img2加入画布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);
//将画布内容导出
varsrc=canvas.toDataURL();
img3.src=src;<p>drawImage的使用方法可以去这里看一下</p>
<ahref="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage"/>
Ⅲ 在canvas画布中如何加载图片
<script>
var Person = function(canvas){
this.ctx = document.querySelector("canvas").getContext("2d");
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
// 获取图片的宽高
that.imageWidth = image.width;
that.imageHeight = image.height;
// 获取单个小怪兽区域的宽高
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上角显示的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
// 绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
})
}
Person.prototype.loadImage = function(callback){
var image = new Image();
// 图片加载完成后执行
image.onload = function(){
callback && callback(image);
}
image.src = this.src;
}
var person = new Person();
</script>
三、绘制小人行走的帧动画
<s<script>
var Person = function(canvas){
this.ctx = document.querySelector("canvas").getContext("2d");
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
// 获取图片的宽高
that.imageWidth = image.width;
that.imageHeight = image.height;
// 获取单个小怪兽区域的宽高
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上角显示的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
// 绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
var index = 0;
setInterval(function(){
that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
index++;
that.ctx.drawImage(image, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br> that.positionWidth, that.positionHeight);
if(index >= 3){
index = 0;
}
}, 100);
})
}
Person.prototype.loadImage = function(callback){
var image = new Image();
// 图片加载完成后执行
image.onload = function(){
callback && callback(image);
}
image.src = this.src;
}
var person = new Person();
</script>
四、绘制疾走的小怪兽
可以通过键盘上下左右键控制小人在画布中任意行走
nction(canvas){
this.ctx = document.querySelector("canvas").getContext("2d");
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
this.stepX = 0;
this.stepY = 0;
this.stepSize = 10;
this.index = 0;
this.direction = 0;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
// 获取图片的宽高
that.imageWidth = image.width;
that.imageHeight = image.height;
// 获取单个小怪兽区域的宽高
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上角显示的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
// 绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
var index = 0;
document.onkeydown = function(e){
that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
switch(e.keyCode){
case 37 :
console.log('左');
that.direction = 1;
that.stepX--;
that.showImage(image);
break;
case 38 :
console.log('上');
that.direction = 3;
that.stepY--;
that.showImage(image);
break;
case 39 :
console.log('右');
that.direction = 2;
that.stepX++;
that.showImage(image);
break;
case 40 :
console.log('下');
that.direction = 0;
that.stepY++;
that.showImage(image);
break;
}
}
})
}
Person.prototype.loadImage = function(callback){
var image = new Image();
// 图片加载完成后执行
image.onload = function(){
callback && callback(image);
}
image.src = this.src;
}
Person.prototype.showImage = function(image){
this.index++;
console.log(this.index);
this.ctx.drawImage(image, this.index * this.positionWidth, this.direction * this.positionHeight, this.positionWidth, this.positionHeight, this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, this.positionWidth, this.positionHeight);
if(this.index >= 3){
this.index = 0;
}
}
var person = new Person();
</script>
深圳网站建设www.sz886.com
Ⅳ delphi 请问如何将Canvas对象里的绘制的东西保存为.jpg文件格式拜托了各位 谢谢
创建一个jpg对象，然后将canvas的内容复制到对象的canvas上
Ⅳ python的gui中画布canvas怎样才能把画在画布上的东西以图片格式导出
图片格式用截屏方式完成即可。
Ⅵ 怎样点击按钮改变canvas中的图片
点应用就是窗口不会消失，可以继续做其它修改，点确定的话，窗口消失，如果想修改还要重新打开，点这两个都是对当前的修改进行保存
Ⅶ 使用canvas如何全屏显示图片
我记得canvas有个画图片的方法canvas.drawBitmap(bgBmp, Rect, Rect, paint);你建个矩形对象，设置大小为屏幕大小至于怎么设置为屏幕大小，一看矩形构造函数就应该明白了。主要是找对角点也就是0，0点和屏幕的右下方那点坐标。也就是屏幕的宽，高
Ⅷ canvas转换为图片的问题
JS Canvas与Image互相转换
原文演示: JavaScript Canvas Image Conversion Demo
在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。
我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)
本文向您展示怎样转换Image为canvas，以及canvas如何提取出一个Image。
转换 Image为 Canvas
要把图片转换为Canvas(画板，画布),可以使用canvas元素 context 的drawImage方法：
复制代码
代码如下:
// 把image 转换为 canvas对象
function convertImageToCanvas(image) {
// 创建canvas DOM元素，并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
转换 Canvas 为 Image
假设图像已经在canvas上处理好，那么可以使用以下方法，把canvas转变为图片Image对象。
复制代码
代码如下:
// 从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
Ⅸ 在Canvas画了一些东西之后，要把画的结果保存为一张Bitmap上传到服务器，请问怎么怎么保存呀
http://www.w3school.com.cn/tags/html_ref_canvas.asp
翻到最后有一个方法叫toDataURL()。得到的是base64编码的图片。