文章标题

最新推荐文章于 2023-10-19 15:03:50 发布
最新推荐文章于 2023-10-19 15:03:50 发布
阅读量613 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： WEB前端 文章标签： canvas poster html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Robocop_Mao/article/details/48769795

关于canvas图像

    var img = new Image();   // Create new Image object  
    img.src = 'myImage.png'; // Set source path

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件：

    var ctx = document.getElementById('myCanvas').getContext('2d');
    var img = new Image();
    img.src = 'oneeye.jpg';
    img.onload = function(){
        ctx.drawImage(img,0,0);
    }

ctx.drawImage(img,x,y,width,height);

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

    var myImage = document.getElementById("myCanvas");
     var cxt = myImage.getContext("2d");
     var img = new Image();
     img.src = "ji.png";
     img.onload = function(){
         cxt.drawImage(img, 0, 0, 50, 50);
         cxt.drawImage(img, 30, 30, 50, 50);
         cxt.drawImage(img, 60, 60, 50, 50);
     }

简单的使用

     <canvas id="myCanvas" style="width: 1000px; height: 600px; border: 1px solid #c3c3c3"></canvas>
     <script type = "text/javascript">
         var myImage = document.getElementById("myCanvas");
         var cxt = myImage.getContext("2d");
         var img = new Image();
         img.src = "1.jpg";
         img.onload = function(){
             cxt.drawImage(img,0,0,200,90);
             cxt.drawImage(img,60,30,200,90);
             cxt.drawImage(img,90,60,200,90);
         }
    </script>

这样做呢？

    cxt.drawImage(img, 0, 0, 200, 90);
    cxt.drawImage(img, 60, 30, 100, 45);
    cxt.drawImage(img, 90, 60, 800, 200);

图像的剪贴

    var canvas1 = document.getElementById("myCanvas")
    var ctx = canvas1.getContext("2d");
    var img = new Image();
    img.src = 'wode.gif';
    img.onload = function(){
        ctx.drawImage(img, 10, 10, 30, 30, 50, 50, 100, 100);
    }

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。是相对于当前img的左上角，不是原始画布左上角
sy 可选。开始剪切的 y 坐标位置。是相对于当前img的左上角，不是原始画布左上角
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

下面是使用canvas设计的一张海报：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            margin: 0 auto;
            display: block;
        }
        #show {
            position: fixed;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="800" id="canvas" onmousemove="go(event)" onmouseout="out()">
        您的浏览器不支持canvas，请升级你的浏览器！
    </canvas>
    <div id="show"></div>
</body>
<script type="text/javascript">
    //获得坐标，便于查找
    var show=document.getElementById("show");
    document.getElementById("show").innerHTML='ds'
    function go(e){
        var x=e.clientX;
        var y=e.clientY;
        document.getElementById("show").innerHTML=x+" "+y;
    }
    function out(){
        show.innerHTML="";
    }

    //获得canvas对象
    var oCanvas = document.getElementById('canvas');
    var ctx = oCanvas.getContext('2d');

    //背景
    ctx.beginPath();
    var grd = ctx.createLinearGradient(0, 0, 1000, 0);
    grd.addColorStop(0, "#810507");
    grd.addColorStop(0.5, "#DA190A");
    grd.addColorStop(1, "#810507");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 1000, 800);
    ctx.closePath();

    ctx.beginPath();

    var grd1 = ctx.createLinearGradient(0, 0, 1000, 0);
    grd1.addColorStop(0, "#ff0");
    grd1.addColorStop(0.5, "#FA190A");
    grd1.addColorStop(1, "#ff0");
    ctx.strokeStyle = grd1;
    ctx.fillStyle = grd1;
    ctx.moveTo(0, 0);
    ctx.lineTo(580, 135);
    ctx.lineTo(520, 290);
    ctx.lineTo(1000, 544);
    ctx.lineTo(1000, 800);
    ctx.lineTo(402, 326);
    ctx.lineTo(490, 177);
    ctx.lineTo(0, 20);
    ctx.lineTo(0, 0);
    ctx.lineWidth = 1;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.font = 'bold 120px Microsoft Yahei ';
    ctx.fillStyle = '#fff';
    ctx.fillText('2-5', 400, 200);

    ctx.font = '24px Microsoft Yahei ';
    ctx.fillStyle = '#fff';
    ctx.fillText('限时', 350, 170);

    ctx.font = '24px Microsoft Yahei ';
    ctx.fillStyle = '#fff';
    ctx.fillText('折扣', 350, 200);

    ctx.font = 'bold 54px Microsoft Yahei ';
    ctx.fillStyle = '#fff';
    ctx.fillText('折', 600, 195);

    ctx.beginPath();
    ctx.fillStyle = 'orange';
    ctx.arc(210, 230, 20, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#FB5707';
    ctx.arc(300, 500, 40, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#FA3F08';
    ctx.arc(690, 290, 80, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();

    ctx.font = 'bold 120px Microsoft Yahei ';
    var grd2 = ctx.createLinearGradient(0, 0, 1000, 0);
    grd2.addColorStop(0, "#ff0");
    grd2.addColorStop(0.5, "#fff");
    grd2.addColorStop(1, "#ff0");
    ctx.fillStyle = grd2;
    ctx.fillText('全场买一送一', 150, 330);

    ctx.beginPath();
    ctx.strokeStyle = '#fff';
    ctx.arc(40, 700, 200, 0, Math.PI * 2, 1);
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = '#ff0';
    ctx.arc(300, 800, 400, 0, Math.PI * 2, 1);
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = 'orange';
    ctx.arc(900, 0, 200, 0, Math.PI * 2, 1);
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = 'orange';
    ctx.arc(650, -30, 100, 0, Math.PI * 2, 1);
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#ff0';
    ctx.arc(10, 50, 4, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#ff0';
    ctx.arc(60, 80, 6, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = 'orange';
    ctx.arc(50, 200, 10, 0, Math.PI * 2, 1);
    ctx.fill();
    ctx.closePath();


    ctx.font = 'bold 42px Microsoft Yahei ';
    ctx.fillStyle = '#fff';
    ctx.fillText('以下书籍更多优惠', 325, 420);


    var img1 = new Image();
    img1.src = 'images/20640680-1_b.jpg';
    img1.onload = function () {
        ctx.drawImage(img1, 33, 0, 135, 200, 70, 500, 160, 200);
    };

    var img2 = new Image();
    img2.src = 'images/20664369-1_b.jpg';
    img2.onload = function () {
        ctx.drawImage(img2, 25, 0, 150, 200, 300, 500, 160, 200);
    };

    var img3 = new Image();
    img3.src = 'images/20670230-1_b.jpg';
    img3.onload = function () {
        ctx.drawImage(img3, 25, 0, 150, 200, 530, 500, 160, 200);
    };

    var img4 = new Image();
    img4.src = 'images/20679764-1_b.jpg';
    img4.onload = function () {
        ctx.drawImage(img4, 32, 4, 136, 193, 760, 500, 160, 200);
    };
</script>
</html>

效果图：

canvas_poster

注意：后画的图层次高于先画的图，可以在代码上调整代码的先后顺序来改变，canvas在网页上是以图片的形式展示，可以直接保存图片

Python爬取人民网文章标题
木秀于林 风亦惧之 虽为萤火 亦绽光芒
10-20 1978
Python爬取人民网文章标题 兴趣点： 还是为了练手，开始想爬人民网主页的所有文章的，但是发现不同板块的页面结构不一样，有的页面还是论坛？？？我人晕了，最后改弄词云了，无奈╮(╯▽╰)╭ 爬取网址： 传送门：http://www.people.com.cn/ 爬虫大体思路和方法： 大体思路： （1）这个页面相对简单，获取页面标签里的文本和链接就不说了 （2）利用jieba库的analyse自动分析方法拆分分析文本 （3）利用Wordcloud的方法实现词云 方法： （1）页面获取方法：getHTMLTex
python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
热门推荐
weixin_46569877的博客
08-04 1万+
python爬取微信公众号
文章标题编号分级
qq_38781075的博客
10-19 2845
一般适用于大标题一、二、三、
使用POI生成文章标题
Cloud的专栏
09-24 8691
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
织梦DEDE自带采集标题限制,解决文章标题字数长度方法
qq_43292127的博客
05-30 1484
文章标题的字数比较长，当文章发布之后，发现dedecms系统自动为标题进行了截字，只要发布的标题字数过多，就会只显示一部分，无法显示完整。所以需要修改一下文章的标题。那么如何修改呢？ 1、登录后台系统 系统 -> 系统基本参数 -> 其它选项 -> 文档标题最大长度 改此参数后需要手工修改数据表 修改为需要设置的标题最大长度，默认是60，也就是30个汉字，一般把60修改成90 。...
dedecms调用文章标题不能全部显示
我不晓得
05-17 2325
1、进入后台–系统–系统设置–系统基本参数–其他选项–文档标题最大程度改为你要的长度原默认是60（这里改为了200） 2、登陆数据库，改数据库表dede_archives表里面的title字段，原默认是60，（这里改为200）. 解决dedecms UTF-8首页文章标题显示字数太短的办法 原因分析：因为UTF-8编码1个中文汉字占用的是3个字节，GBK占用的是2个字节，所以...
火车头插件：根据文章标题生成图片；标题生成相关配图
qq_26057339的博客
05-12 2019
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图； 插件售价200；不限制ip,不限域名。一次购买终身使用。 没有第三方接口的调用不用担心插件失效。 插件效果： 插件优势： 用户可以自定义文字的颜色 用户可以自定义文字的大小 用户可以自定义图片背景 用户可以自定义图片格式 用户可以自定义图片储存的目录 用户可以自定义图片在文章哪个位置插入 插件分为 火车头插件和服务器接口： 服务器接口负责处理图片和储存图片； 火车头插件处理文章内容 服务器插件有运行环境要求 php 版本低于
如何利用Python爬虫爬取博主的全部文章的标题，文章标题的URL。可根据阅读量进行降序输出！
HWP
12-21 3959
步履艰辛呀！自己不会做网络爬虫，只好去找教程例子！ 当然自己也是有点小基础的！只是会读取简单的HTML网页代码！ 对于这么复杂的代码，驾驭不住呦~ 多个代码类型。我会分别列取出来的。 如果是代码的原作者，看到请联系我。我会标明来源地址的！ 前言： 但是无论是谁的主页，都会出现这个人的主页。 已经有好多人都爬取到啦！ 我爬取的所有链接的部分链接： 但是，这个链接：https://blog.csdn...
Java爬虫之爬取多篇含有关键词的文章标题和内容
hell_orld的博客
11-19 2447
Java爬虫之爬取多篇含有关键词的文章标题和内容实现的功能需要用到的jar包需要对html一些标签有一定的了解代码设计思想源代码 实现的功能 该代码针对维科网写的爬虫，具体如果想写其它的可以照着这篇模仿来写！ 输入想要搜索的关键字和输入关键字后的前几页页数（即输入关键字后跳转的网页的页数，如下图） 将包含关键字的文章标题和内容提取出来保存在一个txt文件里面（如下图，输入关键词为智能，前2页） 需要用到的jar包 获取文章信息需要的包：Jsoup； 需要对html一些标签有一定的了解 可以到w3cs
Wordpress自定义函数控制文章标题长度
09-29
在WordPress中，文章标题的展示方式对于网站的整体布局和用户体验起着至关重要的作用。当文章标题过长时，可能会导致页面布局混乱或者视觉效果不佳，尤其是标题在首页以列表形式展示时。为了解决这个问题，我们可以...
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
帝国CMS神器文章自动生成插件：自动生成文章标题和图片
02-25
帝国CMS神器文章自动生成插件是一款为帝国CMS内容管理系统打造的扩展工具，该插件的主要功能是实现文章标题的自动生成以及与之对应的图片的自动匹配或生成。这一功能对于需要大量文章内容发布的网站管理者来说，无疑...
AI自动改写文章标题和内容的WordPress插件
最新发布
05-12
随着自然语言处理技术的进步，AI自动改写文章标题和内容的需求应运而生，为内容创作者提供了强大的工具支持。WordPress作为世界上使用最广泛的网站构建平台之一，其插件生态系统不断扩展，为用户提供了丰富的功能...
iframe的name属性用法（配合a标签的target属性实现页面局部刷新）
Robocop_Mao的博客
07-28 7209
iframe的name属性配合a标签target属性实现局部刷新：
JS将一个十进制转换成二进制
Robocop_Mao的博客
08-09 6960
<!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>十进制的52转化成二进制</title> <script type="text/javascript"> function convert() { var num = prompt('请输入一
font-size属性的继承
Robocop_Mao的博客
07-29 4773
font-size属性的继承
html5 引入百度地图案例
Robocop_Mao的博客
09-27 3748
html5 引入百度地图案例一： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="view
图像分割技术助力文章标题自动化标注
1. 文章标题自动标注程序：这个标题直接揭示了程序的主要功能和用途。这类程序的主要作用在于，它能自动地识别和提取出文章中标题所在的位置，进而标注出来。这样的程序对于自动化的文档处理非常有用，尤其在数字化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值