canvas应用图像与色彩

最新推荐文章于 2023-02-22 21:01:03 发布
最新推荐文章于 2023-02-22 21:01:03 发布
阅读量695 收藏
点赞数 1
分类专栏： HTML5 文章标签： canvas Canvas drawImage Shadows 图像 色彩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu1013714929/article/details/8470425
版权
1.canvas中可以引入图片，可以通过获取本页面中的图片也可以通过javascript新建图片。
2.获得图片后就可以把图片渲染到canvas里。
3.drawImage(image, x, y)：
         image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
         例子： 
     <!DOCTYPE html>
     <html>
     <body>

         <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
             Your browser does not support the HTML5 canvas tag.
         </canvas>

         <script>
		var c=document.getElementById("myCanvas"),
		    ctx=c.getContext("2d"); 
		    var img = new Image();
		    img.src = 'https://developer.mozilla.org/samples/canvas-tutorial/images/backdrop.png';   
			  img.onload = function(){
			    ctx.drawImage(img,0,0);
			    ctx.beginPath();
			    ctx.moveTo(30,96);
			    ctx.lineTo(70,66);
			    ctx.lineTo(103,76);
			    ctx.lineTo(170,15);
			    ctx.stroke();
			  }         	    
         </script>

       </body>
       </html>
                                                                                                             效果为：


  drawImage(image, x, y, width, height)：
         后面的width与height表示图片的宽与高。
  drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：
                                               
4.一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，则需要重新设置 fillStyle 或 strokeStyle 的值。
5.globalAlpha设置透明，比如：
 例子： 
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
	var c=document.getElementById("myCanvas"),
	    ctx=c.getContext("2d"); 
	ctx.fillStyle = '#FD0';
	ctx.fillRect(0,0,75,75);
	ctx.fillStyle = '#6C0';
	ctx.fillRect(75,0,75,75);
	ctx.fillStyle = '#09F';
	ctx.fillRect(0,75,75,75);
	ctx.fillStyle = '#F30';
	ctx.fillRect(75,75,75,75);
	ctx.fillStyle = '#FFF';
 
        ctx.globalAlpha = 0.2;//设置透明度
 
	for (var i=0;i<7;i++){
		ctx.beginPath();
		ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
		ctx.fill();
	}
</script>
</body>
</html>
                                                                                                               效果为：  

6.也可以通过 rgba()设置透明度， rgba(r,g,b,a)中a,b,c分别表示三种颜色的分量，a表示透明度，
  从0.0-1.0。
7.可以通过一系列属性来设置线的样式：
lineWidth = value;//设置线的粗细，属性值必须为正数，默认值是1
      
lineCap = type;//线段端点显示的样子。它可以为：butt，round 和 square。默认原来butt。
           最左边的线用了默认的  butt  。可以注意到它是与辅助线齐平的。中间的是  round  的效果，端点处加上了半径为一半线宽 的半圆。右边的是  square  的效果，端点处加上了等宽且高度为一半线宽的方块。  
      
         lineJoin = type;//图形中两线段连接处所显示的样子。可以是：round, bevel ,miter。默认是 miter。
        最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到 miterLimit 属性的制约。
       
       miterLimit = value;//设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel.

8.createPattern(image,type)
       Image 可以是 Image 对象的引用或者 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y , no-repeat。
       例子： 
  
  

   
   <!DOCTYPE html>
  
  

  
  

   
   <html>
  
  

  
  

   
   <body>
  
  

  
  

   
   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  
  

  
  

   
   Your browser does not support the HTML5 canvas tag.
  
  

  
  

   
   </canvas>
  
  

  
  

   
   <script>
  
  

  
  

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

  
  

   
          ctx=c.getContext("2d"), 
  
  

  
  

   
                         img = new Image();
  
  

  
  

   
     img.src = 'https://developer.mozilla.org/files/222/Canvas_createpattern.png';
  
  

  
  

   
     img.onload = function(){
  
  

  
  

   
                                var ptrn = ctx.createPattern(img,'repeat');
  
  

  
  

   
     ctx.fillStyle = ptrn;
  
  

  
  

   
    ctx.fillRect(0,0,300,300);
  
  

  
  

   
           }
  
  

  
  

   
   </script>
  
  

  
  

   
   </body>
  
  

  
  

   
   </html>
                                   背景图片为：                 效果为：

9.阴影 Shadows：
          shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
          shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。
           shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
           shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。
           例子： 
 
 

  
  

   
   <!DOCTYPE html>
  
  

  
  

   
   <html>
  
  

  
  

   
   <body>
  
  

  
  

   
   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  
  

  
  

   
   Your browser does not support the HTML5 canvas tag.
  
  

  
  

   
   </canvas>
  
  

  
  

   
   <script>
  
  

  
  

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

  
  

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

  
  

   
      ctx.shadowOffsetX = 2;
  
  

  
  

   
      ctx.shadowOffsetY = 2;
  
  

  
  

   
      ctx.shadowBlur = 2;
  
  

  
  

   
      ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
  
  

  
  

   
      ctx.font = "20px Times New Roman";
  
  

  
  

   
      ctx.fillStyle = "Black";
  
  

  
  

   
      ctx.fillText("Sample String", 5, 30);
  
  

  
  

   
   </script>
  
  

  
  

   
   </body>
  
  

  
  

   
   </html>

                                                                                                           效果为：


liupengs
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ChapterJava图形与图像处理.pptx
11-14
Java图形与图像处理是计算机编程中的一个重要领域，特别是在开发用户界面和可视化应用时。Java提供了丰富的API来支持图形和图像的生成与操作。本章主要介绍了三个关键知识点：图形与图像描绘、数字图像处理以及Java ...
canvas修改图片颜色例子
happygirlnan的专栏
08-13 5927
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImage....
利用canvas实现根据背景图片主色调动态展示字体颜色
qq_43682422的博客
10-20 1616
主要通过canvas上下文对象中drawImage方法，去复刻绘制一份图片（注意该canvas不做展示，最好使用display:none隐藏）,然后利用getImageData方法获取图片数据，对获取到的图片数据进行一系列判断操作，得出图片的主色调，然后再进行灰度值计算，根据灰度值判断图片的明暗从而设置出合理的字体颜色。
借助canvas根据drawImage中的img获取对应背景色
Hkweb_的博客
05-25 2020
1.基础概念： canvas.getContext（type） type：'2d'//建立一个二维的环境对象 '3d'//建立一个二维的环境对象 drawImage（img,sx,sy,swidth,sheight,x,y,width,height) 参数注解 img 图片对象 sx 开始裁剪的x轴坐标 sy 开始裁剪的y轴坐标 swi...
canvas样式与颜色，字体，图片，状态，形变
最新发布
yunbabac的博客
02-22 1937
canvas学习
html5如何修改画布颜色,更改在HTML5画布元素上绘制的图像的颜色。
weixin_39703561的博客
06-03 393
为了更改在HTML5 Canvas元素上绘制的图像的颜色，可以尝试运行以下代码。使用drawImage()方法-functiondisplay(img1,red,gr,bl){//functochangecolorofimagevarcanvas1=document.createElement('canvas');//canvaselementinitialisat...
利用 js 开发的基于canvas的填色小应用
12-16
这个应用可能是一个有趣的互动游戏，用户可以使用“油漆桶”工具对预设的图像进行填色，类似于传统的填色书。 首先，我们需要了解JavaScript的基础知识。JavaScript是一种广泛用于前端开发的脚本语言，它可以控制...
Android图形与图像处理
11-30
在Android平台上，图形与图像处理是一项关键技能，它涉及到用户界面设计、游戏开发、相机应用以及其他涉及视觉元素的移动应用程序。本主题主要涵盖Android系统如何处理图形和图像，包括基本概念、API使用以及实例...
基于canvas应用在移动端的前端图片压缩
08-10
基于Canvas的前端图片压缩广泛应用于移动应用、社交媒体平台、在线图片编辑工具以及任何需要上传图片的场景。它可以有效地减小图片大小，提高页面加载速度，同时降低服务器存储和传输成本。 七、优化与注意事项 1. ...
HTML5 Canvas太空虫洞特效
07-24
总的来说，"HTML5 Canvas太空虫洞特效"是一个结合了Canvas基本绘图、动画原理、色彩处理以及用户交互的综合应用实例。开发者通过掌握这些技术，可以创造出更多富有创意和视觉冲击力的网页效果。而`jiaoben7985`这个...
Html5 Canvas开发之插入图片、设置背景、渐变、文本、阴影
热门推荐
子循
11-20 4万+
1.插入图片             等图片加载完，再执行canvas操作  -图片预加载：在onload中调用             drawImage(olmg,x,y,w,h) -olmg:当前图片x,y：坐标w,h：宽高 简单例子： 无标题文档 body{ background:black;} #c1{ background:white;} w
canvas之添加颜色样式、绘制文本、使用图片
陈喵喵的博客
03-11 1万+
一、使用颜色和样式（一）色彩color给图形上色，有两个重要的属性可以用到：fillStyle 和 strokeStyle。fillStyle = color   设置图形的填充颜色。strokeStyle = color 设置图形轮廓的颜色。注意：一旦设置了fillStyle 或 strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置fi...
java中方法drawImage()的参数详细解释
weixin_42074152的博客
07-12 1万+
方便自己理解public abstract boolean drawImage(Image img,int x,int y,int width,int height,ImageObserver observer)绘制指定图像中已缩放到适合指定矩形内部的图像。图像绘制在此图形上下文坐标空间的指定矩形内部，并且如果需要，则进行缩放。透明像素不影响该处已存在的像素。此方法在任何情况下都立刻返回，甚至在整...
解决C#中DrawImage出现渐变色的问题
forever_008的博客
02-26 635
在C#中当使用DrawImage的时候，当我们需要绘制的空间大于图片本身，很可能出现图片出现渐变色的问题： 这是因为DrawImage默认是渐变拉伸，还有一种方式是平铺拉伸； 代码比较： （1）使用之前的代码【出现渐变色问题】 public void DrawImage(Image image, Vector2[] points) { var of...
canvas图像处理详解：从基础到负片效果
本文将深入探讨Canvas中的图像处理基础，特别是如何使用`createImageData()`、`getImageData()`和`putImageData()`这三个关键API来操作像素数据。 首先，`createImageData()`方法用于创建一个新的、空白的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值