HTML5 canvas绘图基础电子名片生成器源码

分类：HTML作者：编程之家用户

创建canvas

  <canvas id="myCanvas" class="canvas">
    您的浏览器不支持canvas
  </canvas>

基础设置

    <script type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        canvas.width=100;
        canvas.height=100;
    </script>

画直线
moveTo(x1,y1)
lineTo(x2,y2)

    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.stroke();

画圆形
ctx.arc(x,y,radius,2*Math.PI,true)

    ctx.beginPath();
    ctx.arc(300,300,50,true);
    ctx.strokeStyle = '#000';
    ctx.stroke();

画矩形
ctx.strokeRect(x1,y1,x2,y2)

    ctx.strokeRect(300,100,200,100);

beginPath()开始一条新路径
closePath()使当前路径闭合
不是成对出现的

      ctx.beginPath();
      ctx.moveTo(300,1)">);
      ctx.lineTo(200,200);
      ctx.closePath();
      ctx.strokeStyle = '#0F0';
      ctx.stroke();

设置样式

      ctx.moveTo(0,1)">);
      ctx.lineTo(100,1)">);
      ctx.closePath();
      //lineWidth 设置描边的线宽
      ctx.lineWidth = 10;
      strokeStyle 设置描边样式
      ctx.strokeStyle = "#F00";
      ctx.stroke();
      fillStyle 设置填充样式
      ctx.fillStyle = "rgba(0,0.5)";
      ctx.fill();

绘制矩形与样式同步

      ctx.strokeRect(100,1)">);
      ctx.fillRect(100,100);

保存和恢复上下文环境，一般成对出现
save 保存当前绘画环境，包括变换和样式
restore 恢复当前绘画环境，包括变换和样式

   ctx.save();
   ctx.restore();

图形变换

      translate 平移变换
      ctx.translate(0,1)">);
      ctx.beginPath();
      ctx.moveTo(0,1)">);
      ctx.stroke();

      rotate 旋转变换
      ctx.rotate(Math.PI/4);
      ctx.beginPath();
      ctx.moveTo(0,1)">);
      ctx.lineWidth = 5;
      ctx.strokeStyle = "#F00";
      ctx.stroke();

      scale 缩放变换
      ctx.scale(1,0.5);
      ctx.fillRect(0,-100,100);

线性渐变

        var linearGradient = ctx.createLinearGradient(0,1)">给渐变添加颜色
        linearGradient.addColorStop(0,'rgb(255,0)');
        linearGradient.addColorStop(0.3,'rgb(0,1)">);
        linearGradient.addColorStop(1,255)'设置渐变作为样式
        ctx.fillStyle = linearGradient;
        ctx.fillRect(0,200);

径向渐变

        var radialGradient = ctx.createRadialGradient(400,400,150,1)">);
        radialGradient.addColorStop(0,1)">);
        radialGradient.addColorStop(1,1)">);
        ctx.fillStyle = radialGradient;
        ctx.beginPath();
        ctx.arc(400,Math.PI * 2,1)">);
        ctx.fill();

文字

字体若设置了居中，圆心会在文字的中间位置，所以圆心还是要根据画布大小和文字的宽度进行设置。

        var str = "hello world";
        设置文本样式，比如大小，字体
        ctx.font = "50px sans-serif"水平对其设置，left center right
        ctx.textAlign = "center"垂直对齐设置，top middle bottom
        ctx.textBaseline = "top"填充文本
        ctx.fillText(str,1)">描边文本
        ctx.strokeText(str,1)">获取文本宽度
        var width = ctx.measureText(str).width;
        console.log(width);

图片

        ctx.fillRect(0,1)">,canvas.width,canvas.height);
        var img = new Image();
        img.src = "logo.png"一定要在图像加载完成后的回调中绘制图像
        img.onload = function () {
            在（0,0）点处绘制img图像
             ctx.drawImage(img,0);
            
            获取img图像的（0,0）点处的40*40区域，绘制在（100,100）点处，缩放成80*80
            ctx.drawImage(img,40,80,80);
        }

创建图像画刷ctx.createPattern(image,type)

        ctx.fillRect(0,1)">;
        img.onload = 创建图像画刷，no-repeat,repeat-x,repeat-y,repeat
            var pattern = ctx.createPattern(img,"repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(0,canvas.height);
        }

阴影绘制

        阴影的X偏移
        ctx.shadowOffsetX = 10阴影的Y偏移
        ctx.shadowOffsetY = 10阴影的颜色
        ctx.shadowColor = 'rgba(0,0.5)'阴影的模糊度
        ctx.shadowBlur = 10;
        ctx.fillStyle = 'rgba(255,1)">;
        ctx.fillRect(100,1)">);

        ctx.font = "50px sans-serif";
        ctx.fillText("我是小可爱",100);

区域剪辑

    保存当前环境
    ctx.save();
    ctx.arc(300,Math.PI*2,1)">);
    进行区域剪辑
    ctx.clip();
    ctx.fillStyle = "#F00";
    ctx.fillRect(100,1)">恢复环境，释放了剪辑区域的作用
    ctx.restore();

绘制曲线ctx.arc(x,startAngle,endAngle,true)
最后一个参数代表是否是逆时针方向

        绘制圆弧
        ctx.arc(100,1)">);
        ctx.fill();

        二次样条曲线ctx.quadraticCurveTo(qcpx,qcpy,qx,qy)
        ctx.beginPath();
        ctx.moveTo(100,355);
        ctx.quadraticCurveTo(265,145,380,349贝塞尔曲线ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
        ctx.beginPath();
        ctx.moveTo(175,375);
        ctx.bezierCurveTo(297,182,468,252,517,380);
        ctx.fill();

canvas绘制曲线生成工具
两次贝塞尔曲线：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
三次贝塞尔曲线：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

 

动画

ctx.clearRect(x,width,height) 清除区域，用于重新绘制

        var posx = 0,posy = 0,dir = 1,isMouseInRect = false;

         确定动画范围
        canvas.onmousemove = (e){
            var mouseX = e.offsetX;
            var mouseY = e.offsetY;
            if(mouseX > posx && mouseY <posx +50 && mouseY > posy && mouseY < posy+ 50){
                isMouseInRect = ;
            }else{
                isMouseInRect = ;
            }
        }

         开始动画
        setInterval(() {
            if(!isMouseInRect){
                posx += 10 * dir;
            }
            clearRect清空画布的一个矩形区域
            ctx.clearRect(0,canvas.height);
            ctx.fillRect(posx,posy,50,50);
            if(posx + 50 >= canvas.width){
                dir = -1else if(posx <= 0){
                dir = 1;
            }
        },100);

离屏技术
把canvas(sx,sy)处宽sw，高sy的区域，绘制到(dx,dy)处，并缩放为宽dx，高dh
ctx.drawImage(canvas,sx,sy,sw,sh,dx,dy,dw,dh)

<!DOCTYPE html>
html lang="en"head>
  meta charset="UTF-8" />
  title>canvasstyle type="text/css">
    canvas {
      border: 1px solid red;
    }
    #offCanvas
      display none}
  stylebody>
      width="600px" height="400px"
      您的浏览器不支持canvas
    <!--创建离屏Canvas-->
    ="offCanvas"script  ="text/javascript">
        var canvas = document.getElementById('myCanvas);
         ctx  canvas.getContext(2d);

         offCanvas offCanvas offCtx  offCanvas.getContext( posx = 01false;

        //把一些复杂的绘画操作，画在离屏Canvas上面
         drawALot function(){
            for( k; k<20++){
                 i;icanvas.width;i+=10){
                     j;jcanvas.height;j){
                        offCtx.beginPath();
                        offCtx.arc(i,j,52*Math.PI,1)">true);
                        offCtx.stroke();
                    }
                }
            }
        }

        canvas.onmousemove (e){
             mouseX  e.offsetX;
             mouseY  e.offsetY;
            if(mouseX &&posx +50  posy + 50){
                isMouseInRect ;
            }else{
                isMouseInRect ;
            }
        }

        setInterval(() {
            !isMouseInRect){
                posx += 10  dir;
            }
            clearRect清空画布的一个矩形区域
            ctx.clearRect( drawALot();
            真正要用到复杂的绘画的时候，直接从离屏Canvas上拷贝过来
            ctx.drawImage(offCanvas,offCanvas.width,offCanvas.height,1)">);
            (posx >= canvas.width){
                dir -else <= ){
                dir 100);

        drawALot();
    scripthtml>

案例：电子名片生成器

index.html

="utf-8" >电子名片生成器link href="style/style.css" rel="stylesheet" />
div class="left-div"="line">
      input ="name" type="text" placeholder="姓名"/>
    div="address"="地址"="job"="职业"="slogan"="口号" button ="generateBtn">生成名片button="right-div"="cardCanvas"
      您的浏览器不支持Canvas，请升级浏览器
    ="animCanvas"script src="script/main.js"></>

style.css

* {
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
}
.left-div {
  width: 30%; 100%;
  float: left;
  background: #a4a296;
}
.line {
  text-align: center;
  margin-top: 30px;
}
.line:first-child { 200px;
}
.line span {
  color: white;
}
.line input { 300px; 30px;
  border-radius: 15px;
  padding-left:
  outline: none;
  border: none;
}
.line button { 100px; #222; #DDD;
  cursor: pointer;
  position: relative; 15px;
}
.line button:hover { #000; #FFF;
}
.line button:active {
  left: 1px;
  top: 1px;
}
.right-div { 70%; #eee9d3; relative;
}
.right-div canvas { absolute; 200px; 50%;
  margin-left: -300px;
}
#cardCanvas {
  display: none;
}

main.js

 创建和设置cardCanvas，该canvas作为离屏canvas
var cardCanvas = document.getElementById('cardCanvas');
var cardCtx = cardCanvas.getContext('2d');
cardCtx.canvas.width = 600;
cardCtx.canvas.height = 100;

 加载图片
 Image();
img.src = "images/logo.png";
img.onload = () {
  cardCtx.drawImage(img,10,10);
}

var generateBtn = document.getElementById("generateBtn");
generateBtn.onclick = () {
  cardCtx.clearRect(0,cardCtx.canvas.width,cardCtx.canvas.height);
   背景的线性渐变
  var linearGradient = cardCtx.createLinearGradient(0,cardCtx.canvas.height);
  linearGradient.addColorStop(0.5,1)">);
  linearGradient.addColorStop(1,'rgb(133,133,133)');
  cardCtx.fillStyle = linearGradient;
  cardCtx.fillRect(0,1)"> logo图像
  cardCtx.drawImage(img,10,1)">);
   获取姓名、地址、职业，绘制，并计算长度
  var name = document.getElementById("name").value || "请输入姓名";
  var address = document.getElementById("address").value || "请输入地址"var job = document.getElementById("job").value || "请输入职业"var nameWidth,addressWidth,jobWidth,maxWidth = 0;
  cardCtx.font = "bold 30px sans-serif";
  cardCtx.fillStyle = "#fff";
  cardCtx.fillText(name,105,35);
  nameWidth = cardCtx.measureText(name).width;
  cardCtx.font = "bold 20px sans-serif";
  cardCtx.fillText(address,60);
  cardCtx.fillText(job,85);
  addressWidth = cardCtx.measureText(address).width;
  jobWidth = cardCtx.measureText(job).width;
  if(maxWidth < nameWidth) {
    maxWidth = nameWidth;
  }
   addressWidth) {
    maxWidth = addressWidth;
  }
   jobWidth) {
    maxWidth = jobWidth;
  }
   绘制口号
  var slogan = document.getElementById("slogan").value || "请输入口号";
  cardCtx.save();
   做图形变换
  cardCtx.rotate(-0.1);
  cardCtx.translate(0,1)"> 阴影
  cardCtx.shadowOffsetX = 10;
  cardCtx.shadowOffsetY = 10;
  cardCtx.shadowColor = 'rgba(0,1)">;
  cardCtx.shadowBlur = 1.5;
  cardCtx.fillStyle = "#ddd" 计算口号位置
  var solganWidth;
  solganWidth = cardCtx.measureText(slogan).width;
  var offset = (cardCtx.canvas.width - 115 - maxWidth - solganWidth) / 2;
  cardCtx.fillText(slogan,115 + maxWidth + offset,1)"> 画曲线
  cardCtx.beginPath();
  cardCtx.moveTo(115 + maxWidth + offset,70);
  cardCtx.quadraticCurveTo(115 + maxWidth + offset,115 + solganWidth + maxWidth + offset,1)">);
  cardCtx.strokeStyle = "#ddd";
  cardCtx.stroke();
  cardCtx.restore();
}
 触发click事件
generateBtn.click();

 创建和设置animCanvas，该canvas才是真正的显示
var animCanvas = document.getElementById('animCanvas'var animCtx = animCanvas.getContext('2d');
animCtx.canvas.width = 600;
animCtx.canvas.height = 100var circles = [];
setInterval(() {
   擦出画布
  animCtx.clearRect(0,animCtx.canvas.width,animCtx.canvas.height);
   把离屏canvas的内容画进来
  animCtx.drawImage(cardCanvas,animCtx.canvas.height,0,1)"> 绘制下落的圆形
  for(var i=0; i<=10; i++) {
    circles[i]) {
      circles[i] = {};
      circles[i].radius = Math.floor(Math.random() * 5) + 1;
      circles[i].y = - circles[i].radius - Math.floor(Math.random() * 10);
      circles[i].x = i * 60 + Math.floor(Math.random() * 10) - 5;
      circles[i].vy = Math.floor(Math.random() * 5) + 1;
    }
    animCtx.beginPath();
    animCtx.arc(circles[i].x,circles[i].y,circles[i].radius,Math.PI * 2);
    animCtx.fillStyle = "rgba(255,1)">;
    animCtx.fill();
    circles[i].y = circles[i].y + circles[i].vy;
    if(circles[i].y > animCtx.canvas.height + circles[i].radius * 2) {
      circles[i] = undefined;
    }
  }
},100);

案例：山中明月风景图

>Document
        canvasbackground-color#000;opacity0.7}
    ="canvas" width="720px"="600px">您的浏览器不支持canvas canvasdocument.getElementById("canvas contextcanvas.getContext( 月亮绘制
        context.shadowOffsetX;
        context.shadowOffsetY;
        context.shadowBlur;
        context.shadowColorrgba(255,0.2);
        context.fillStyleyellow;
        context.arc(40);
        context.fill();

         文字绘制
        context.beginPath();
         str山高月小;
        context.font50px 宋体#fff;
        context.fillText(str,1)">400200 山峰绘制
        context.beginPath();
        context.lineWidth;
        context.strokeStylelightblue;
        context.moveTo(14600);
        context.quadraticCurveTo(60193123);
        context.stroke();

        context.beginPath();
        context.moveTo(298);
        context.bezierCurveTo(817369150045134273361452569210695426715);
        context.stroke();

    >

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

html代码字体颜色做法
HTML代码中要想改变字体颜色，常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言，通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢？这里为大家介绍一下。 首先，在HTML代码...
html代码字体盖住图片
HTML代码如何让字体盖住图片呢？需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
html代码字体设置
HTML代码字体设置 在HTML中，我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style，下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
html代码字体字号
在网页设计中，HTML代码的字体和字号选择是非常重要的一个环节，因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号，可以使用HTML中的样式属性。使用样式属性设置字体和字号，如下所示： <p style="font-family: Aria...
html代码实现太极图
HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标准语言。它由许多标签（一对尖括号包围的关键字）组成，这些标签告诉浏览器如何显示内容。使用HTML代码，我们可以轻松地创建各种类型的图像和图形，如太极图。 在HTM...
html代码实现外链
外链是指在一个网页中添加一个指向其他网站的链接，用户可以通过这个链接直接跳转到其他网站。在HTML中，实现外链的方法很简单，只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链，点击跳转到www.ex...
html代码实现报名界面
HTML代码是实现网页界面的基础，而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
html代码字体编辑器
HTML是一种标记语言，用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一，它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器，使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
html代码字体样式
HTML代码中，字体样式是开发者们必备的一部分。在HTML中，我们可以通过特定的标签和属性设置字体的样式、颜色和大小，以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
html代码字体设为粗体
HTML中的字体可以设为粗体，以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中，常用的标签包括： 1. 标签：该标签会把文本加粗显示，语法如下： 这是一段加粗的文本 2. 标签：与标签作用相同，但语义更强，表示该文本内容的重要性。语法如下：...
html代码实现文件上传与下载
HTML代码可以实现文件的上传和下载，在网页开发中相当常见。通过使用<input>标签和<form>标签，我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
html代码如何转换时间戳
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下，可能需要将时间戳转换为实际时间，这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
html代码实现下载文件到本地
HTML是一种用于创建网页的标记语言。在HTML中，我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下： <a href="文件的URL" download="文件名">下载文件</a> 其中，href属性是文件...
html代码字体靠左
在HTML代码中，对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符，从而使代码排版更加整齐。下面是一个例子： <p>这是一个段落。</p> &lt...
html代码字典
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如，以下是HTML代码字典中的一部分内容： <a href="url">link text</a> 在...
html代码实现一键复制
在网页开发过程中，遇到一些需要用户复制的内容，我们通常都会提供复制按钮，让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
html代码实现登录页面
用户登录 欢迎来到公司登录界面，请输入用户名和密码登录 用户名： 密码： 代码解释： 第1行：定义了一个 HTML 文档 第2行：开始了 HTML 头部 第3行：定义了...
html代码字体竖着
HTML 代码是用来创建网页的语言，它包含了许多不同的元素和属性，让我们可以在网页中添加各种不同的元素和内容，如文字、图片、链接等等。在编写 HTML 代码时，我们可以使用各种不同的样式来美化我们的网页，例如更改字体、颜色、大小等等。 font-family:...
HTML代码字体转移
HTML代码中的字体转移 在编写HTML代码时，我们经常会使用各种字体来增强页面的可读性和视觉效果。但是，有些字符或特殊符号可能会在HTML中具有不同的含义，这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中，使用"&"符号表示一个特殊字符将要被转...
html代码字体变色
HTML 编程语言中，你可以使用字体属性来更改文本的字体大小、颜色和样式。其中，字体颜色是最常用的样式更改。在 HTML 中，你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例，演示如何使用 "color" 属性来更改字体颜色...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot