一个canvas的demo

该demo放于tomcat下运行，否则出现跨域错误

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div style="text-align: center;"><canvas id="myCanvas" width="500" height="300" style="border: 1px solid #fff123"></canvas><div><button id="btn" οnclick="download()">点我下载</button></div></div><script type="text/javascript">let cans=document.getElementById("myCanvas");let ctx=cans.getContext("2d");let img =new Image();img.src="2.jpg";img.setAttribute("crossOrigin",'Anonymous');img.onload = function(){//以Canvas画布上的坐标(10,10)为起始点，绘制图像ctx.drawImage(img, 10, 10);    ctx.drawImage(img,50,50,100,100);ctx.strokeStyle = "#0695FF";        //定义矩形的颜色ctx.strokeRect(50,50,100,100);ctx.strokeRect(50,170,100,100);};function imgType(ty) {let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;}function download() {let type = 'png';   //设置下载图片的格式
 let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片
 let imgData = img_png_src.replace(imgType(type),'image/octet-stream');let filename = '图片' + '.' + type; //下载图片的文件名
 saveFile(imgData,filename);}let saveFile = function(data, fileName){let save_link = document.createElement('a');save_link.href = data;save_link.download = fileName;let event = document.createEvent('MouseEvents');event.initEvent("click", true, false);save_link.dispatchEvent(event);};</script></body>
</html

转载于:https://www.cnblogs.com/daysn/p/10374828.html

一个canvas的demo相关推荐

微信小游戏 - Canvas/WebGL Demo 移植
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...
移植到android_微信小游戏 Canvas/WebGL Demo 移植
本文由大神易旭昕授权发布, 原文链接:https://zhuanlan.zhihu.com/p/33785287 (点击文后原文链接可跳转至作者的知乎) --------------------- ...
canvas 文字颜色_实现一个canvas小画板
<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形.例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染. --摘自MDN ...
java 基础api实现上传,上传文件到7牛云存储的java api一个简单的demo实现
最近在做一个项目,需要用到云存储,项目用的是七牛云.现在将项目过程中关于调用七牛云平台的java api来上传本地文件到七牛云空间的一个简单的demo展示给大家,希望对同样再用七牛云的童鞋们有所帮助. ...
我的第一个 react redux demo
最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如<深入浅出react和redux>,<React全栈++Redux+Flux+webpack+Bab ...
Unity3D引擎入门搭建一个FPS游戏Demo
目录一.unity3d简介(平台,应用范围,经典游戏) 二.界面,基础操作(界面,创建场景,灯光系统,摄像机,组件,脚本语言) 1.界面 2.基本操作三.demo制作(坐标系统,视角控制,移动,碰 ...
三维重建基本流程，搭建一个龙的demo
最近在学习三维重建的一些知识,作为一个小白,从入门到完成一次重建过程是一个需要花一段比较长时间的过程,在网上搜索各种资料时,会因为资料不全,导致无法理清楚逻辑,从而导致入门困难. 我主要是通过书和网上 ...
开发一个Canvas小游戏实现一个游戏“引擎”
前言这个游戏其实在三四年前就写了,中间还重构过好几次,之前都是用简单的面向对象和函数式编程来写,游戏中的元素关系到还是分的挺开,但是游戏的渲染,运算等逻辑分的不够清晰,整个逻辑基本都是自顶向下的流水 ...
实现一个canvas画板
<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形.例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染. --摘自MDN ...
android 观察者模式的简单demo,一个简单的demo彻底搞懂观察者模式
介绍观察者模式也被称为发布-订阅(Publish/Subscribe)模式,它属于行为型模式的一种.观察者模式定义了一种一对多的依赖关系,一个主题对象可被多个观察者对象同时监听.当这个主题对象状态变 ...

一个canvas的demo

一个canvas的demo相关推荐

最新文章

热门文章