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的宽高需要用属性值widthheight来指定

      若未指定则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>