[Canvas绘图] 第01节 画布准备

最新推荐文章于 2024-01-05 00:00:00 发布
最新推荐文章于 2024-01-05 00:00:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwsister/article/details/50065601
版权

本节目标：

(1) 封装Canvas API
(2) 画布分区

(3) 简单图形绘制


实现步骤：

(1) 封装Canvas API

<span style="font-weight: normal;">//全局变量
var plot = function() {
	//此处封装Canvas API
}();</span>


<span style="font-size:18px;font-weight: normal;">/**
* @usage   初始化环境
* @author  mw
* @date    2015年11月27日  星期五  08:41:41 
* @param
* @return
*
*/
	function setPreference() {
		plot.init()
			//颜色
			.setStrokeStyle("black")
			.setFillStyle('#666666')
			//阴影
			.setShadowColor('#CCCCCC')
			.setShadowBlur(20)
			.setShadowOffsetX(10)
			.setShadowOffsetY(10)
			//直线
			.setLineCap("round")
			.setLineJoin("round")
			.setLineWidth(3)
			.setMiterLimit(10)
			//文字
			.setFont("normal normal normal 18px arial")
			.setTextAlign("left")
			.setTextBaseline("alphabetic")
			.setGlobalCompositeOperation("source-over")
			.setGlobalAlpha(1.0)
			.save();
	}</span>

(2) 画布分区

<span style="font-weight: normal;"><span style="font-size:18px;">//将画布分为row*col个区，并且相对于m*n的基准绘图	
function setSector(row, col, m, n) {
	var width = 600;
	var height = 400;
	
	if (m<=row && n<=col) 
		plot.setTransform(1,0,0,1,width*(n-1)/col,height*(m-1)/row);

}</span></span>

(3) 简单图形绘制

<span style="font-size:18px;">/**
* @usage   绘制圆形
* @author  mw
* @date    2015年11月27日  星期五  12:11:38 
* @param
* @return
*
*/
function strokeCircle(x, y, r) {
		plot.beginPath()
		.arc(x, y, r, 0, 2*Math.PI, true)
		.closePath()
		.stroke();
}

function fillCircle(x, y, r) {
	plot.beginPath()
		.arc(x, y, r, 0, 2*Math.PI, true)
		.closePath()
		.fill();
}

/**
* @usage   绘制三角形
* @author  mw
* @date    2015年11月27日  星期五  12:11:38 
* @param
* @return
*
*/
function strokeTri(x, y, r) {
	plot.beginPath()
		.moveTo(x+r*Math.sin(Math.PI/3), y+r*Math.cos(Math.PI/3))
		.lineTo(x, y-r*Math.sin(Math.PI/3))
		.lineTo(x-r*Math.sin(Math.PI/3), y+r*Math.cos(Math.PI/3))
		.closePath()
		.stroke()
		
}

function fillTri(x, y, r) {
	plot.beginPath()
		.moveTo(x+r*Math.sin(Math.PI/3), y+r*Math.cos(Math.PI/3))
		.lineTo(x, y-r*Math.sin(Math.PI/3))
		.lineTo(x-r*Math.sin(Math.PI/3), y+r*Math.cos(Math.PI/3))
		.closePath()
		.fill()
		
}

/**
* @usage   绘制正方形
* @author  mw
* @date    2015年11月27日  星期五  12:11:38 
* @param
* @return
*
*/
function strokeSquare(x, y, r) {
	var a = r/2;
	
	plot.beginPath()
		.moveTo(x-a,y-a)
		.lineTo(x+a, y-a)
		.lineTo(x+a, y+a)
		.lineTo(x-a,y+a)
		.closePath()
		.stroke()
}

function fillSquare(x,y,r) {
	var a = r/2;
	
	plot.beginPath()
		.moveTo(x-a,y-a)
		.lineTo(x+a, y-a)
		.lineTo(x+a, y+a)
		.lineTo(x-a,y+a)
		.closePath()
		.fill()
}

/**
* @usage   绘制梯形
* @author  mw
* @date    2015年11月27日  星期五  09:44:10 
* @param
* @return
*
*/

	function strokeTrapezoid(x, y, r) {
		var sqrt5 =  2.236;
		var a = r * 2 / sqrt5;
		
		plot.beginPath()
		.moveTo(x-a/2,y-a/2)
		.lineTo(x+a/2, y-a/2)
		.lineTo(x+a, y+a/2)
		.lineTo(x-a,y+a/2)
		.closePath()
		.stroke()
	}
	
	function fillTrapezoid(x, y, r) {
		var sqrt5 =  2.236;
		var a = r * 2 / sqrt5;
		
		plot.beginPath()
		.moveTo(x-a/2,y-a/2)
		.lineTo(x+a/2, y-a/2)
		.lineTo(x+a, y+a/2)
		.lineTo(x-a,y+a/2)
		.closePath()
		.fill()
	}
	
	
/**
* @usage  绘制菱形
* @author  mw
* @date    2015年11月27日  星期五  09:44:10 
* @param
* @return
*
*/
	function strokeDiamond(x, y, r) {
		var cos30 = Math.cos(Math.PI/6);
		var sin30 = Math.sin(Math.PI/6);
		
		var a = r * cos30;
		var h = r * sin30;
		var b = r/cos30-a;
		
		plot.beginPath()
			.moveTo(x-b,y-h)
			.lineTo(x+a, y-h)
			.lineTo(x+b, y+h)
			.lineTo(x-a,y+h)
			.closePath()
			.stroke()
		
	}
	
	function fillDiamond(x, y, r) {
		var cos30 = Math.cos(Math.PI/6);
		var sin30 = Math.sin(Math.PI/6);
		
		var a = r * cos30;
		var h = r * sin30;
		var b = r/cos30-a;
		
		plot.beginPath()
			.moveTo(x-b,y-h)
			.lineTo(x+a, y-h)
			.lineTo(x+b, y+h)
			.lineTo(x-a,y+h)
			.closePath()
			.fill()
	
	}

/**
* @usage  绘制五边形
* @author  mw
* @date    2015年11月27日  星期五  10:13:24 
* @param
* @return
*
*/	
	function strokePentagon(x, y, r) {
		var cos72 = Math.cos(2 * Math.PI/5);
		var sin72 = Math.sin(2 * Math.PI/5);
		var cos36 = Math.cos(Math.PI/5);
		var sin36 = Math.sin(Math.PI/5);
		
		
		var a = 2 * r * sin36;
		var h = a*sin72-r*cos36;
		var b = a/2+a*cos72;
		
		plot.beginPath()
			.moveTo(x-r*sin36,y-r*cos36)
			.lineTo(x+r*sin36, y-r*cos36)
			.lineTo(x+b, y+h)
			.lineTo(x,y+r)
			.lineTo(x-b,y+h)
			.closePath()
			.stroke()		
	
	}
	
	function fillPentagon(x, y, r) {
		var cos72 = Math.cos(2 * Math.PI/5);
		var sin72 = Math.sin(2 * Math.PI/5);
		var cos36 = Math.cos(Math.PI/5);
		var sin36 = Math.sin(Math.PI/5);
		
		
		var a = 2 * r * sin36;
		var h = a*sin72-r*cos36;
		var b = a/2+a*cos72;
		
		plot.beginPath()
			.moveTo(x-r*sin36,y-r*cos36)
			.lineTo(x+r*sin36, y-r*cos36)
			.lineTo(x+b, y+h)
			.lineTo(x,y+r)
			.lineTo(x-b,y+h)
			.closePath()
			.fill()		
	
	}
	
/**
* @usage   绘制五角星
* @author  mw
* @date    2015年11月27日  星期五  11:19:42 
* @param
* @return
*
*/	

	function strokeStar5p(x, y, r) {
		var cos72 = Math.cos(2 * Math.PI/5);
		var sin72 = Math.sin(2 * Math.PI/5);
		var cos36 = Math.cos(Math.PI/5);
		var sin36 = Math.sin(Math.PI/5);
		
		
		var a = 2 * r * sin36;
		var h = a*sin72-r*cos36;
		var b = a/2+a*cos72;
		
		plot.beginPath()
			.moveTo(x-r*sin36,y-r*cos36) //1			
			.lineTo(x+b, y+h) //3			
			.lineTo(x-b,y+h) //5
			.lineTo(x+r*sin36, y-r*cos36) //2
			.lineTo(x,y+r) //4
			.closePath()
			.stroke()	
	
	}

	function fillStar5p(x, y, r) {
		var cos72 = Math.cos(2 * Math.PI/5);
		var sin72 = Math.sin(2 * Math.PI/5);
		var cos36 = Math.cos(Math.PI/5);
		var sin36 = Math.sin(Math.PI/5);
		
		
		var a = 2 * r * sin36;
		var h = a*sin72-r*cos36;
		var b = a/2+a*cos72;
		
		plot.beginPath()
			.moveTo(x-r*sin36,y-r*cos36) //1			
			.lineTo(x+b, y+h) //3			
			.lineTo(x-b,y+h) //5
			.lineTo(x+r*sin36, y-r*cos36) //2
			.lineTo(x,y+r) //4
			.closePath()
			.fill()	
	
	}
</span>

Demo检验:

<span style="font-size:18px;">function myplot() {
	setPreference();

	setSector(4, 6, 1, 1);
	//绘制三角形
	strokeTri(50, 50, 40);
	fillTri(50,50,40);

	setSector(4, 6, 1, 2);	
	//绘制圆形
	strokeCircle(50, 50, 40);
	fillCircle(50,50,40);

	setSector(4, 6, 1, 3);
	//绘制正方形
	strokeSquare(50, 50, 40);
	fillSquare(50,50,40);

	/*
	[单词本]
		梯形 Trapezoid
		平行四边形 Parallel quadrilateral
		菱形 Diamond
		五角星 Five-pointed star
		五边形 Pentagon
		六边形 Hexagon
	*/
	
	setSector(4, 6, 4, 4);
	//绘制梯形
	strokeTrapezoid(50, 50, 40);
	fillTrapezoid(50, 50, 40);
	
	setSector(4, 6, 4, 5);
	//绘制菱形
	strokeDiamond(50, 50, 40);
	fillDiamond(50, 50, 40);
	
	setSector(4, 6, 3, 3);
	//绘制五角星
	strokeStar5p(50, 50, 40);
	fillStar5p(50,50,40);
		
	setSector(4,6,3,2);
	fillStar5p(50, 50, 40);	
	
	setSector(4,6,3,4);
	fillStar5p(50, 50, 40);
	
	setSector(4, 6, 2, 3);
	//绘制五边形
	strokePentagon(50, 50, 40);
	fillPentagon(50,50,40);
	
	setSector(4, 6, 4, 6);
	//绘制五边形
	strokePentagon(50, 50, 40);
	fillPentagon(50,50,40);


}</span>

结果图：


mwsister
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 wxapp画布 canvas详细介绍
09-01
例如，如果你有两个`canvas`元素使用相同的`canvas-id`，那么第二个`canvas`将不会显示，并会触发一个`error`事件。 `canvas`组件还支持事件监听，例如`binderror`事件。当发生错误时，如加载资源失败或绘制操作...
微信小程序通过canvas绘制所需图片形状。（文章以直角梯形进行说明）
邱小健的博客
04-22 3577
通过这种方法可以快捷的完成一些设计的效果。index.wxml//新建一个画板。&lt;canvas canvas-id="myCanvas" style="border: 1px solid;"/&gt;index.js onLoad: function (options) { const ctx = wx.createCanvasContext('myCanvas'); // c...
前端通过不同方式画等腰梯形
m0_62785037的博客
12-23 1031
前端通过css方式、canvas画实现正梯形和倒梯形
Android绘制几何图形
u012384954的专栏
11-30 3008
1.Canvas相当于画布，所有的图形都在其上面绘制并显示出来。Paint相当于画笔，可以设置不同颜色等，画出不同图形。 以下均在onDraw(Canvas canvas)执行，定义了Paint paint = new Paint(); 2.背景设置颜色 canvas.drawColor()，例如：canvas.drawColor(Color.WHITE); 3.去锯齿paint.setAn
flutter 使用canvas实现一个梯形
初遇你时动了情
12-11 426
【代码】flutter 使用canvas实现一个梯形。
js 固定四点绘制梯形
u012632105的博客
09-01 265
可以通过 Canvas API 来实现固定四点绘制梯形。
第23章 canvas创建一个画布
04-23
`canvas`标签是一个矩形区域，通过JavaScript来控制其上的绘图操作。以下是一些核心知识点： 1. **基本使用**：在HTML中，`<canvas>`标签定义了一个可被脚本绘制的画布。例如： ```html <canvas id="myCanvas" ...
QML--Canvas画布实现矩形圆形等圈定
01-10
Canvas组件的核心是它的`绘画上下文`（Painting Context），这个上下文提供了多种绘图方法，如`fillRect()`、`strokeRect()`、`drawCircle()`等，用于在画布上填充或描边各种形状。在QML中，你可以通过JavaScript...
原生JS使用Canvas实现拖拽式绘图功能
12-11
在本文中，我们将探讨如何使用原生JavaScript实现一个拖拽式绘图功能，该功能基于Canvas元素，并且不依赖任何第三方库。这个功能强大的绘图工具支持多种图形绘制，包括但不限于线条、箭头、多边形和圆形，还具有拖拽...
Canvas2D梯形拉伸.zip
07-02
用canvas在不规则四边形上绘制图片
canvas绘图任意矩形、多边形
10-19
canvas鼠标拖动绘制任意矩形、多边形；在index.html页面中，根据drawType来绘制形状，矩形：drawType = 'rect'; 多边形：drawType =polygon
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
11-30
想看前面整理的canvas常用API的同学可以点下面： canvas学习之API整理笔记（一） canvas学习之API整理笔记（二） 本系列文章涉及的所有代码都将上传至：http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar 从本篇文章开始，我会分享给大家canvas绘制的各种基础图形和酷炫的图形，注意：是一系列！欢迎关注！ 后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路。 本文看点：使用canvas来绘制常见的各种图形实例，并且会简单封装一下绘制各图形的方法，最后会分享给大家一个封
Canvas多边形绘制
09-24
javascript实现任意角度正多边形绘制canvas图形源码.
HTML5 canvas基本绘图之绘制五角星
09-27
// 计算第一个线段的终点坐标 context.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 200 + 200, -Math.sin((18 + i * 72) / 180 * Math.PI) * 200 + 200); // 计算第二个线段的终点坐标 context.line...
paint,canvas绘画出来的各种形状
懒虫一个V
08-19 9580
<br />package com.my.activity.graphic;<br /><br /> import android.content.Context;<br /> import android.graphics.Canvas;<br /> import android.graphics.Color;<br /> import android.graphics.LinearGradient;<br /> import android.graphics.Paint;<br /> imp
canvas绘制直角梯形（向左）
最新发布
大剑师兰特的GIS世界
01-05 955
canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
canvas上绘制一个无边框线的红色填充梯形
qq_45290368的博客
12-05 455
canvas上绘制一个无边框线的红色填充梯形
canvas建立梯形画布
12-09
然后，我们需要使用moveTo()方法将绘图游标移动到第一个顶点的位置。 ```javascript ctx.moveTo(x1, y1); ``` d. 接下来，我们需要使用lineTo()方法绘制从第一个顶点到第二个顶点的线段。 ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值