Html5-vancas

最新推荐文章于 2020-12-11 10:01:23 发布
最新推荐文章于 2020-12-11 10:01:23 发布
阅读量554 收藏
点赞数
分类专栏： java HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supper_me/article/details/79476650
版权
java 同时被 2 个专栏收录
39 篇文章 1 订阅
订阅专栏
HTML5
2 篇文章 0 订阅
订阅专栏
<!doctype html>
<html>
<head>

</head>
<body>
   
    <canvas width = "10000" height = "10000" id = "mycanvas" style = "background :white">
        您的浏览器不支持canvas，请选择合适的浏览器。
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var cxt = canvas.getContext("2d");
        //alert(cxt);
        //画一条直线
        cxt.beginPath();
        cxt.lineWidth = 10;
        cxt.moveTo(20,20);
        cxt.lineTo(100,20);
        cxt.stroke();
        cxt.closePath();
        //画一个圆
        cxt.beginPath();
        cxt.lineWidth = 5;
        cxt.arc(200,200,50,0,360,false);
        cxt.strokeStyle = "blue";
        cxt.stroke();
        cxt.closePath();
        //画一个实心圆
        cxt.beginPath();
        cxt.arc(400,400,50,0,360,false);
        cxt.fillStyle = "red";
        cxt.fill();
        cxt.closePath();
        //画一个矩形
        cxt.beginPath();
        cxt.rect(80,80,30,30);
        cxt.stroke();
        cxt.closePath();
        cxt.beginPath();
        cxt.rect(100,100,30,30);
        cxt.fill();
        cxt.closePath();
        //文字设置
        
        cxt.beginPath();
        cxt.font = "40px 黑体";
        cxt.fillText("无兄弟，不编程！",100,100);
        cxt.lineWidth = 1;
        cxt.strokeText("无兄弟，不网游啊！",100,120);
        cxt.strokeText("Hello World!",10,50);
        cxt.closePath();
        //旋转图片
        cxt.save();// 拿走保存图片上所有内容，构建画图环境
            cxt.translate(20,20);  //设置新的原点坐标
             //设置旋转角度
            cxt.rotate(-90*Math.PI/180);
            cxt.lineWidth = 10;
            //画图
            cxt.beginPath();
            cxt.moveTo(0,0);
            cxt.lineTo(20,100);
            cxt.stroke();
            cxt.closePath();
         cxt.restore(); //恢复复图片上所有内容
        //过程不可逆转，先设置旋转角度，再画图
        
        //画图
        var img = new Image();
        img.src("timg.jpg");
        cxt.drawImage(img,1000,800,90,80);
    </script>
</body>
    
</html>


supper_me
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML2CANVAS使用总结
林恒的博客
03-05 1万+
前言 最近遇到了个功能，要把表单转化成图片来保存，这让我想到了一个插件HTML2CANVAS，这里给大家分享下它的用法和我使用的过程 html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器...
前端 Canvas基础 （一）【基本图形】
前端、python爱好者
07-07 4370
canvas [ˈkænvəs] ：画布 这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
html2canvas在vue下的巨坑
weixin_34061555的博客
09-01 2990
公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片，自己画这也太耗时间了吧！后面在npm上一查有个html2canvas的框架可以用这里附上地址 html2canvas 使用起来也特别简单，官网是这么描述的 html &lt;div id="capture" style="padding: 10px; background: #f5da55"&gt; &lt;h4 styl...
html2canvas的使用
你好的博客
09-24 2525
在页面生成截图下载 1 首先要去安装这个依赖 npm html2canvas 2 然后在从页面去应用 import html2canvas from “html2canvas”; 3 再从你要截图的整个最大的div 绑定ref 随意定名 4 再根据你自己的方法去使用就好了 toImage() { html2canvas(this.$refs.imageWrapper).then((canvas) => { const link = document.c
vant ui 官方文档_开源工具 | 推荐9款优秀的开源小程序UI框架
weixin_40001245的博客
12-11 607
openEA开源周刊openEA开源社区的官方运营载体这里每天给大家呈现有价值的开源资讯，欢迎您的来稿与推荐，点击上方蓝色字，加入我们吧！摘要：MinUI 是由蘑菇街发布的组件库，Min 是一款微信小程序组件化解决方案，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序和组件库。openEA开源社区(ID:openEA)| 出品小夕 | 编辑openEA_wiki | 来...
微信小程序利用canvas实现蜘蛛网图
jarisMA的博客
01-24 1346
微信小程序利用canvas实现蜘蛛网图 1、.wxml文件 canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas">canvas> 2、.js文件 const app = getApp(); Page({ //事件处理函数 canvasIdErrorCallback: function (e)
通过获取鼠标的点击位置来动态定位元素
马果的博客
12-15 3351
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
html2canvas
qq_40098572的博客
11-12 760
作用 html2canvas可以通过纯JS对浏览器端经行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式 支持的浏览器 Firefox 3.5+ Google Chrome Opera 12+ IE9+ Safari 6+ 基本语法 //两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas html2canvas(document.getElementById('id')).then(fu.
HTML5初学一 随机的骰子
weixin_30670925的博客
08-12 150
主要是就是在canvas上面画图，没有太多技术含量： <html> <head> <script type="text/javascript"> var ctx; var firstDicX = 50; var firstDicY = 50; var dicW = 100; var dixH = 100; var secDicX = 2...
html2canvas截长图
小爬虫的博客
11-18 2476
github链接 一、下载运行后选择下图的html2canvas即可直接去到路由界面测试 二、下图是html2canvas路由页面，点击右上角的生成图片即可下载长图 三、源码路径（html2canvas源码github） 四、源码（关键在generateImage 这个方法） <template> <div class="html2canvas-wrap"> <div ref="area" id="aaa"> <p&gt
粒子群算法(PSO)初识
xueluowutong的博客
12-12 7218
粒子群算法PSO是模拟群体智能所建立起来的一种优化算法，用于解决各种优化问题。   抽象问题实例化： 假设一群 鸟在觅食，只有一个地方有 食物，所有鸟儿都看不见食物（不知道食物的具体位置，知道了就不无需觅食了）， 但是能闻见食物的气味，知道食物的 远近（即知道食物和自己的距离）。 假设鸟与鸟之间能共享信息（即互相知道每个鸟离食物多远，这个是人工设定鸟群合作），那么最好的策略就是结合自己离食...
java Canvas画图学习小结
qq_42265608的博客
06-04 1万+
主函数 package paint; import javax.swing.JFrame; public class PaintMain { JFrame jFrame; public static void main(String[] args) { // TODO 自动生成的方法存根 PaintMain pai...
强大的html5的canvas标签
流年似水
05-20 440
<br /><canvas id="c"></canvas><br /><script><br />f=Math;d=document;_=d.body;_.style.background="#000";e=_.children[0];e.width=w=innerWidth-10;e.height=h=innerHeight-25;g=e.getContext("2d");t=w/h;with(g){globalCompositeOperation="lighter";scale(w/2/t,h/2);
简单粗暴彻底解决selenium+chromedriver无法定位各种元素的方法
一个业务人员的技术之旅
02-24 3万+
解决各种webdriver.find_element定位不准的问题
html2canvas 图片偏移+不全（vue，附有解决方法）
朝雨的博客
07-02 5750
下面是我原来的写法，这个写法原来并没有问题，但后面出现图片不完整+ 白屏+ 偏移（下面附有解决方法） 要截图的区域（截取 <div ref="imageToFile" id="imageToFile"> <van-col :span="24" class="topPage" :style="{backgroundImage:'url(' + backImg + ')'}" > <img class=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值