Canvas概述01

原创

生而为人我很遗憾 2023-05-09 00:29:36 博主文章分类：前端 ©著作权

文章标签 位图阴影效果 html canvas js 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者生而为人我很遗憾的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html><!--这行必须要，否则在IE9中也不会起作用-->
<html>
   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
      <style> 
         <!--这处通过CSS设置的属性有些可以直接影响到绘图效果的，比如padding等这样就可以省去了一些背景的设置等操作，只不过这样的背景是不可移动的-->
         #canvas {
            margin: 10px;
            padding: 10px;
            background: #fff;<!--canvas的背景色是由css来定义的，canvas本身并没有提供bg属性-->
            border: thin inset #aaaaaa;
         }
      </style>
   </head>

  <body>
<!--这里的宽和高不要在CSS中指定，因为canvas存在两个大小，在css中设置并不能改变画布的大小，图像会变形, canvas默认绘图大小是300*150px，可以通过canvas标签属性来指定(可以用非负数也可以用px，用百分比时需要参考父元素的大小)，也可以通过js来指定。-->
    <canvas id='canvas' width='600' height='300'>
      Canvas not supported
    </canvas>

    <script src='example.js'></script>
  </body>
</html>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");<!--这处的context有很多属性，它是CanvasRenderingContext2D的实例-->
canvas.width = 300;<!--这行代码在放在输出代码的前面，它会重设环境附带着清空功能，也意味着其不能实现全屏化功能-->
context.fillStyle ="red";
context.strokeStyle = "blue";
context.font = "32PT Arial ";
context.fillText("Hello World", 20, 20);
context.strokeText("wello World", 100, 100);
</script>

<!--context属性*******************
    canvas              指向绘图环境所属的canvas
    fillstyle          图形填充操作中所使用的颜色、渐变色、图案context.fillStyle = 'cornflowerblue';
    font                   在用fillText()和strokeText()时所使用的字体context.font = '38pt Arial';
    globalAlpha          全局透明度，取值0-1.0
    globalCompsiteOperation	指定了浏览器将某个物体绘制在其他物体之上时，所采用的绘图方式
    lineCap              指定线段的端点样式，默认为butt，还有其它两个可选值：round和square
    lineWidth          默认值为1.0，在canvas中只能画实线，其它的线类型需要自己扩展
    lineJoin              线段相交时的样式，默认为miter，可选值bevel，round，可用来绘制圆角矩形。
    miterLimit          如何绘制miter形式的线段焦点
    shadowBlur          默认为0，表示如何延伸阴影效果
    shadowColor          阴影的颜色，默认为半透明效果
    shadowOffsetX      单位px，指定了阴影效果的水平方向偏移量
    shadowOffsetY	
    strokeStyle          描边设定，可指定颜色、渐变色、图案
    textAlign          用fillText()和strokeText()时文本的水平对齐
    textBaseLine        	用fillText()和strokeText()时文本的垂直对齐
-->

<!--利用浏览器的插件来测试代码片断的性能，这个功能需要借助类似firebug这样的插件来完成，但下面的两个API并不是所有浏览器都支持
    console.profile("");     console.profileEnd();
-->

<!--以下功能是2012年后发布的标准，不是所有浏览器都支持
**  ellipse();//绘制椭圆
**  getLineDash(), setLineDash()//绘制虚线
**  扩充了TextMetrics对象，用于精确指定文本的外接矩形框
**  定义了Path对象，相对的stroke()支持Path参数
**  定义了CanvasDrawingStyles绘制风格属性
**  点击区域hit region的支持
**  Canvas的焦点支持
**  **  更多特性可以在http://cordhtml5canvas.com来查阅这些新功能**  **   
-->

<!--
**canvas绘制要经过以下几步，第【2】-【4】步只有启动阴影效果时才会运行，所以非必要情况下不要使用shadow效果，尤其是动画阴影**
【1】将图形绘制到一个无限大的透明位图中(canvas是一个位图)，在绘制时遵从当前的填充、描边、线条样式；

【2】将图形的阴影绘制到另外一幅位图中，在绘制时使用当前绘图环境的阴影设定；
【3】将阴影中每一个px的alpha分量乘以绘图环境对象的globalAlpha属性值；
【4】将绘有出阴影的位图与经过剪辑区域剪切过的canvas进行合成时，在操作时使用当前合成参数；

【5】将图形的每一个px分量乘以绘图环境的globalAlpha属性值；
【6】将绘有图形的位图，合成到当前经过剪辑区剪切过的canvas位图上时，在操作时使用当前合成参数；

-->