1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      canvas学习笔记之2d画布基础的实现

        发布时间£º2019-02-21 16:44:13   作者£º佚名   我要评论

      这篇文章主要介绍了canvas学习笔记之2d画布基础的实现的相关资料,小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧

      一. Canvas?#24039;?/strong>

      < canvas > 是一个可以使用脚本£¨通常是js£©来绘图的HTML元素

      < canvas > 最早由Apple引入WebKit£¬用于Mac OS X 的 Dashboard和 Safari

      如今£¬所有主流的浏览器都支持它£¨IE9+,更低版本需引入Explorer Canvas来支持£©

      1. 开始画图£¨渲染上下文£©

      < canvas > 元素创造了一个固定大小的画布£¬其上的渲染上下文CanvasRenderContext2D£¬可以用来绘制和处理要展示的内容¡£

      若要在canvas上绘图£¬首先得获取CanvasRenderContext2D2d渲染上下文¡££¨此处指2d的£¬不谈webgl£©

      const canvas = document.getElementById('mycanvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'pink';
      ctx.fillRect(10, 10, 300, 300);
      

      示例

      2. CanvasRenderContext2D的属性£º

      通过设置上下文的属性£¬可以指定绘图的样式¡£

      所有属性如下£º

      属性 简介
      canvas canvas元素
      fillStyle 用来填充路径的当前的颜色¡¢模式或渐变
      font 字体样式
      globalAlpha 指定在画布上绘制的内容的不透明度
      globalCompositeOperation 指定颜色如何与画布上已有的颜色组合£¨合成£©
      lineCap 指定线条的末端如?#20301;?#21046;
      lineDashOffset 设置虚线偏移量
      lineJoin 指定?#25945;?#32447;条如何连接
      lineWidth 指定画笔£¨绘制线条£©操作的线条宽度
      miterLimit 当 lineJoin 属性为 "miter" 的时候£¬这个属性指定了斜连接长度和线条宽度的最大比率
      shadowBlur 模糊效果程度
      shadowColor 阴影颜色
      shadowOffsetX 阴影水平偏移距离
      shadowOffsetY 阴影垂直偏移距离
      strokeStyle 用于画笔£¨绘制£©路径的颜色¡¢模式和渐变
      textAlign 文本的对齐方式
      textBaseline 文字垂直方向的对齐方式

      3. Canvas宽高

      Canvas的宽高需要用属性值width£¬height来指定

      若未指定£¬则Canvas 的默认大小为300×150

      通过样式指定的宽高£¬只是canvas元素的显示大小£¬并不是绘图环境的大小

      canvas {width: 1000px;height: 600px;}
      <canvas id="mycanvas" width="1000" height="600"></canvas>
      <canvas id="mycanvas1" width="500" height="300"></canvas>
      <canvas id="mycanvas2"></canvas>
      ...
      ctx.fillStyle = "red";
      ctx.fillRect(10, 10, 100, 100);

      宽高示例

      为什么样式设置了同样大小£¬显示却截然不同的情况呢£¿

      • canvas本身有?#25945;?#22823;小£º一个是元素本身大小£¬一个是绘图表面£¨drawing surface£©的大小
      • 如果通过width,height属性来设置£¬是同时修改了元素本身和绘图表面大小£¬
      • 如果canvas元素的大小不符合绘图表面大小时£¬则会对绘图表面进行缩放£¬使之符合元素本身大小£¬
      • 无特殊需求£¬建议直接使用canvas的width和height就好

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚本之家¡£

      相关文章

      • 详解h5页面在不同ios设备上的问题总结

        这篇文章主要介绍了详解h5页面在不同ios设备上的问题总结的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-03-01
      • canvas学习笔记之2d画布基础的实现

        这篇文章主要介绍了canvas学习笔记之2d画布基础的实现的相关资料,小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-21
      • 小程序瀑布流解决左右两边高度差距过大的问题

        这篇文章主要介绍了小程序瀑布流解决左右两边高度差距过大的问题的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-20
      • h5网页水印SDK的实现代码示例

        这篇文章主要介绍了h5网页水印SDK的实现代码示例的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-19
      • canvas绘图按照contain或者cover方式适配并居中显示

        这篇文章主要介绍了canvas绘图按照contain或者cover方式适配并居中显示的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的
        2019-02-18
      • Canvas 文本转粒子效果的实现代码

        这篇文章主要介绍了Canvas 文本转粒子效果的实现代码的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-14
      • canvas 橡皮筋式线条绘图应用方法

        这篇文章主要介绍了canvas 橡皮筋式线条绘图应用方法的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-13
      • web页面?#35745;?#23454;现

        这篇文章主要介绍了web页面?#35745;?#23454;现的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小编来一起学习学习
        2019-02-12
      • Canvas系列之滤镜效果

        Canvas 真的是一个神奇的东西£¬不仅能够绘制各种图形¡¢文本和位图£¬还能够对位图进行复杂的像素运算和处理¡£因此像滤镜这些东西£¬其实 Canvas 也可以来实现¡£本文介绍了Can
        2019-02-12
      • canvas学习总结三之绘制路径-线段

        这篇文章主要介绍了canvas学习总结三之绘制路径-线段的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小
        2019-01-31

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>