[Html5]画布canvas以及动态生成算法

HTML 5 canvas 标签表示一个图形的容器,可以通过该标签生成一个空白画布,从而进行绘图工作。

Html部分

<canvas id="canvas"></canvas>

JS部分

//获取画布
var c=document.getElementById("canvas");            
var ctx=c.getContext("2d");

canvas一些常用的JS操作

//清空画布
//绘制一个纯白色画布 0,0初始位置坐标, 200,200结束位置坐标
ctx.clearRect(0,0,200,200);
//重新在画布中添加原图片 0,0初始位置坐标, 200,200结束位置坐标
ctx.drawImage(img,0,0,200,200);
//复制 - 将画布1中的内容复制到画布2中
//获取画布1中,指定坐标区域的内容
var imgData=ctx.getImageData(0,0,200,200);
var c2=document.getElementById("myCanvas2");
var ctx2=c2.getContext("2d");
//将图像数据放回画布2  0,0坐标
ctx2.putImageData(imgData,0,0);
//绘制直线
//必须开启beginPath,否则可能会出现之前绘制过的线条
ctx.beginPath();
//开始位置坐标
ctx.moveTo(x1,y1);
//结束位置坐标
ctx.lineTo(x2,y2);
//绘制直线
ctx.stroke();
//必须释放closePath
ctx.closePath();
//绘制圈圈
//必须开启beginPath,否则可能会出现之前绘制过的圆圈
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//必须释放closePath
ctx.closePath();
//绘制文字                  
ctx.font="16px Arial";                  
ctx.fillText(user,x,y);
//Base64压缩
//获取画布中的图像数据,返回Base64压缩后的字符串
var canvas = c;
var dataURL = canvas.toDataURL();
// returns "data:image/png;base64,iVBORw0..."
//删除字符串前的提示信息 "data:image/png;base64,"
var b64 = dataURL.substring( 22 );
console.log(b64);

根据图片个数,为每张图片生成一个画布,并且可以操作画布
画布
注 : 需要自己引入jQuery

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.0.0.js"><
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值