`

HTML5 Canvas几种画法

阅读更多

html5 Canvas画布画图几种常见方法

参考地址:

http://www.w3school.com.cn/html5/html_5_canvas.asp

http://www.cnblogs.com/Abner5/p/5845367.html

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .title {
      color:#444;font-weight:bold;padding:5px;
    }
  </style>
</head>
<body>
  <div class="title">画布制图(线画图):</div>
  <canvas id="myCanvas1" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图(画圆)arc(x, y, radius, startRad, endRad, anticlockwise):</div>
  <canvas id="myCanvas2" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图(画圆)arcTo(x1, y1, x2, y2, radius):</div>
  <canvas id="myCanvas3" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图(颜色过度):</div>
  <canvas id="myCanvas4" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图(直接放图片):</div>
  <canvas id="myCanvas5" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

</body>
</html>

 javascript

/**
  * 画线画图
  */
var myCanvas1 = document.getElementById("myCanvas1");
if(myCanvas1.getContext) {
	var ctx1 = myCanvas1.getContext("2d");
	ctx1.fillStyle = '#D5B081'; // 线条填充颜色
	ctx1.moveTo(50, 150); // 重新设置起点
	ctx1.lineTo(80, 260);
	ctx1.lineTo(230, 260);
	ctx1.lineTo(250, 150);
	ctx1.lineTo(190, 180);
	ctx1.lineTo(120, 180);
	ctx1.lineTo(50, 150);
	ctx1.moveTo(155, 180); // 重新设置起点
	ctx1.lineTo(155, 50);
	ctx1.moveTo(155, 150); // 重新设置起点
	ctx1.lineTo(100, 120);
	ctx1.moveTo(155, 100); // 重新设置起点
	ctx1.lineTo(120, 70);
	ctx1.moveTo(155, 170); // 重新设置起点
	ctx1.lineTo(200, 80);
	ctx1.lineWidth = 10; // 画线宽度
	ctx1.lineCap = 'round'; // 线条的端点。lineCap有3个值:butt(平,默认),round(圆),square(方)
	ctx1.lineJoin = 'round'; // 线的交汇处,有3个属性:miter(默认,尖角),bevel(斜角),round(圆角)
	//ctx1.closePath(); //闭合路径,交汇处缺口处理
	ctx1.strokeStyle = '#844C10'; // 画线颜色
	ctx1.stroke(); // 画线
	ctx1.fill(); // 填充区域
}



/**
  * 画圆 arc(x, y, radius, startRad, endRad, anticlockwise)
  */
var myCanvas2 = document.getElementById("myCanvas2");
if(myCanvas2.getContext) {
	var ctx2 = myCanvas2.getContext("2d");
	ctx2.fillStyle = '#D5B081'; // 线条填充颜色
	ctx2.lineWidth = 10;
	//开始一个新的绘制路径
	ctx2.beginPath();
	//设置弧线的颜色为蓝色
	ctx2.strokeStyle = "#844C10";
	var circle = {
			x : 150,    //圆心的x轴坐标值
			y : 150,    //圆心的y轴坐标值
			r : 100      //圆的半径
		};
	var startRad = 0; // 起始弧度
	var endRad = Math.PI*2; // 结束弧度 0 < endRad <= 2
	var anticlockwise = false; // false: 顺时针画,true:逆时针画
	//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
	ctx2.arc(circle.x, circle.y, circle.r, startRad, endRad, anticlockwise);    
	//按照指定的路径绘制弧线
	ctx2.stroke();
	ctx2.fill(); // 填充区域
}


/**
  * 画圆 arcTo(x1, y1, x2, y2, radius)
  */
var myCanvas3 = document.getElementById("myCanvas3");
if(myCanvas3.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx3 = myCanvas3.getContext("2d");  
    
    //指定绘制路径的起始点
    ctx3.moveTo(50, 50); 
    //注释掉lineTo(),不再先绘制直线   
    ctx3.lineTo(140, 30);
    
    //此时,坐标点(140,30)就是绘制弧线时的当前端点
    
    //端点1
    var p1 = {
    	x : 260,
    	y : 50
    };
    //端点2
    var p2 = {
    	x : 240,
    	y : 100    		
    };
    //绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为80px的圆的一段弧线
    ctx3.arcTo(p1.x, p1.y, p2.x, p2.y, 80);
    
    ctx3.lineWidth = 10;
    //设置线条颜色为蓝色
    ctx3.strokeStyle = "blue";
    //按照上述绘制路径绘制弧线
    ctx3.stroke();
}


/**
  * 画布制图(颜色过度)
  */
var myCanvas4 = document.getElementById("myCanvas4");
if(myCanvas4.getContext) {
	var ctx4 = myCanvas4.getContext("2d");
	//定一个变量,线性渐变
	var grd = ctx4.createLinearGradient(0, 0, 500, 0); //(xStart,yStart)起点,(xEnd,yEnd)终点
	grd.addColorStop(0, '#ff0'); //offset范围是0~1之间的浮点数,color是关键颜色
	grd.addColorStop(0.5, '#f30');
	grd.addColorStop(1, '#7fc259');
	ctx4.fillStyle = grd;
	ctx4.fillRect(0, 0, 500, 500);

	//径向渐变
	ctx4.beginPath(); //开始
	var grdCirle = ctx4.createRadialGradient(100, 100, 50, 100, 100, 100);
	//(xStart,yStart,radiusStart)起点圆的中心点坐标和半径,(xEnd,yEnd,radiusEnd)终点圆的中心点坐标和半径
	grdCirle.addColorStop(0, "#f7f8fa"); //起点
	grdCirle.addColorStop(0.5, "red");
	grdCirle.addColorStop(1, "#53c5d9"); //终点
	ctx4.fillStyle = grdCirle;
	ctx4.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆
	ctx4.fill(); //填充
	ctx4.closePath(); //关上

	ctx4.beginPath();
	var graA = ctx4.createRadialGradient(300, 100, 50, 310, 110, 20);
	graA.addColorStop(0, "#632cd2");
	graA.addColorStop(0.3, "#91bd1c");
	graA.addColorStop(0.7, "#e06a29");
	graA.addColorStop(1, "#27cd46");
	ctx4.fillStyle = graA;
	ctx4.arc(300, 100, 100, 0, 2 * Math.PI);
	ctx4.fill();
	ctx4.closePath();

	ctx4.translate(250, 250);//移动坐标原点
	//坐标变换
	for(var i = 0; i < 30; i++) {
		ctx4.rotate(Math.PI/10);//旋转角度
		ctx4.scale(0.95,0.95);//缩小比例
		ctx4.beginPath();
		ctx4.fillStyle = "rgba(255,157,0,0.5)";
		ctx4.fillRect(100, 100, 120, 60);
		ctx4.closePath();
	}
}


/**
  * 画布制图(直接放图片)
  */
var myCanvas5 = document.getElementById("myCanvas5");
if(myCanvas5.getContext) {
	var ctx5 = myCanvas5.getContext("2d");
	var img=new Image();
	img.src="flower.png"; // 图片地址
	cxt5.drawImage(img,0,0);
}

 

 

 

 

 

  • 大小: 18.2 KB
  • 大小: 53.8 KB
0
0
分享到:
评论

相关推荐

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    html5canvas播放视频

    HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...

    HTML5Canvas基础教程

    资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...

    html5 canvas 图片压缩

    总的来说,HTML5 Canvas提供了一种灵活的方式来处理和压缩图片,适配各种浏览器和设备。通过理解并运用上述技术,你可以创建一个高效且兼容性强的图片压缩解决方案,确保在微信、Chrome、Firefox等不同环境中都能...

    HTML5 CanvasAPI

    HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    html5 canvas 游戏

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...

    《HTML5 Canvas 开发详解》第二版pdf

    《HTML5 Canvas 开发详解》第二版pdf 版

    html5 canvas.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...

    HTML5 Canvas核心技术.pdf

    HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形,通过JavaScript控制图形的绘制细节,让网页不仅仅局限于展示静态内容,而是可以实现动态的、交互式的图形绘制。本书名为“HTML5 ...

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    HTML 5 CANVAS游戏开发实战

    标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...

    html5 canvas 实现贪吃蛇

    HTML5 Canvas是HTML5标准中的一个关键特性,它允许开发者在网页上进行2D图形的绘制,无需依赖任何插件。Canvas通过JavaScript API提供了一系列的方法,使得动态和交互式的图形制作变得简单。在这个项目中,“html5 ...

    html5 canvas填色画游戏代码

    在这个“html5 canvas填色画游戏代码”中,我们主要关注以下几个知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素,通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法,如`...

    html5,canvas扇形菜单

    HTML5和Canvas是现代网页开发中的重要技术,它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素,它允许开发者通过JavaScript在网页上进行2D绘图,无需借助Flash或其他插件。这个...

    html5 canvas云粒子数字时钟动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的...

Global site tag (gtag.js) - Google Analytics