zoukankan      html  css  js  c++  java
  • 如何使用canvas绘图

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【如何使用canvas绘图】

    1.背景介绍

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

    没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

    2.知识剖析

    2.1 canvas的兼容性

    Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。

    2.2 canvas的一些基本属性

    首先得说下width和height属性了,这是在canvas中必备的属性。

    画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。;默认值是 300。

    height:画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 width的一半。

    123

    如何利用dom绘出一些简单的图

    在这里就需要用到一些属性:

    fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。比如说绘制一个渐变色的矩形

    fillRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的填充矩形

    demo1 制作渐变矩形

    var a=document.getElementById("myCanvas");

    var demo1=a.getContext("2d");

    var my_gradient=demo1.createLinearGradient(0,0,0,170);

    my_gradient.addColorStop(0,"red");

    my_gradient.addColorStop(1,"blue");

    demo1.fillStyle=my_gradient;

    demo1.fillRect(20,20,150,100);

    strokeStyle:设置或返回用于笔触的颜色、渐变或模式。

    strokeRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的矩形边框

    line-表示边框宽度

    canvas里面还可以添加一些文本属性,比如说font,textAlign,textBaseline等等

    demo2制作渐变矩形框

    var b=document.getElementById("myCanvas");

    var demo2=b.getContext("2d");

    var gradient=demo2.createLinearGradient(0,0,170,0);

    gradient.addColorStop("0","#FFF");

    gradient.addColorStop("0.5","blue");

    gradient.addColorStop("1.0","red");

    // 用渐变进行填充

    demo2.strokeStyle=gradient;

    demo2.lineWidth=10;//边框宽度

    demo2.strokeRect(20,20,150,100);

    demo3 使用font, textAlign属性

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    // 在位置 150 创建蓝线

    ctx.strokeStyle="blue";

    ctx.moveTo(150,20);

    ctx.lineTo(150,170);

    ctx.stroke();

    ctx.font="15px Arial";

    // 显示不同的 textAlign 值

    ctx.textAlign="start";

    ctx.fillText("textAlign=start",150,60);

    ctx.font="40px Arial";

    ctx.textAlign="end";

    ctx.fillText("textAlign=end",150,80);

    ctx.textAlign="left";

    ctx.fillText("textAlign=left",150,100);

    ctx.textAlign="center";

    ctx.fillText("textAlign=center",150,120);

    ctx.textAlign="right";

    ctx.fillText("textAlign=right",150,140);

    2.3 canvas中的一些常用方法

    1).lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条

    2).moveTo():把路径移动到画布中的指定点,不创建线条

    3).stroke():绘制已定义的路径

    demo4 canvas显示路径;

    var canvas = document.getElementById('myCanvas'); //获取上下文对象,canvas很多常用方法都是基于这个对象实现的

    var context = canvas.getContext("2d"); //目前参数只有2d

    context.lineWidth = 5;  //线条宽度

    context.moveTo(10,10);  //光标移到这点

    context.lineTo(10,50);  //下一点坐标

    context.lineTo(100,50);  //下一点坐标

    context.stroke();        //绘制路径

    4).beginPath():起始一条路径,或重置当前路径

    5).arc():创建弧/圆线

    6).closePath():创建从当前点回到起始点的路径

    demo5.绘制三角形

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    ctx.beginPath();

    ctx.moveTo(20,20);

    ctx.lineTo(20,100);

    ctx.lineTo(70,100);

    ctx.closePath();

    ctx.stroke();

    3.常见问题

    图像能不能放到canvas上?

    4.解决方案

    可通过使用drawImage(image,x,y)就可以将图像放到canvas上,然后在canvas内设置宽高,就可以将图像放到画布中。

    demo6.利用canvas渲染图片

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    var img=document.getElementById("img");

    img.onload = function() {

    ctx.drawImage(img,0,0);

    }

    5.编码实战

    6.扩展思考

    在上个demo中发现如果设置canvas标签css的width,height与在canvas中设置width,height不一样,这是为什么?

    高度和宽度是用于绘图的逻辑帆布尺寸和是不同的距离style.height和style.widthCSS属性。如果不设置CSS属性,画布的本征大小将被用作显示大小; 如果设置CSS属性,并且它们与画布尺寸不同,则您的内容将在浏览器中缩放。

    7.参考文献

    参考一:https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5 canvas中width,height与style width,style height的区别

    参考二:http://www.runoob.com/html/html5-canvas.html HTML5 Canvas | 菜鸟教程

    参考三:http://www.w3school.com.cn/html5/html5_canvas.asp W3C HTML5标签Canvas

    更多内容,可以加入IT交流群565734203与大家一起讨论交流

    这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地

  • 相关阅读:
    2019-2020-1 20175311 20175324 20175330 实验四 外设驱动程序设计
    2019-2020-1 20175311 《信息安全系统设计基础》第十一周学习总结
    2019-2020-1《信息安全系统设计》20175311 20175324 20175330 实验三实时系统
    【2019-2020-1】20175330 20175324 20175311 实验二 固件程序设计
    2018-2019-1 20175311 20175324 20175330 实验一 开发环境的熟悉
    2019-2020-1 20175311胡济栋 《信息安全系统设计基础》第五周学习总结教材学习
    恶意代码分析
    免杀进阶
    Android的安装
    免杀原理与实践
  • 原文地址:https://www.cnblogs.com/jnshu/p/10172100.html
Copyright © 2011-2022 走看看