canvas学习（一）：七巧板

Ysiqiqi 2016-07-04

前几天在慕课网上学canvas的视频，因为老师讲的太好了让我觉得canvas很好玩，就跟着老师做了介个demo，这里记录一下。原视频连接如下：http://www.imooc.com/video/2435，有兴趣的同学可以去学学。

效果很简单，就不上图了，直接上代码吧：

1、html代码：

<body>
<canvas id="myCanvas" style="border:1px solid #aaa;display:block;margin:50px;">
	当前浏览器不支持canvas，请换个浏览器试试。<!--这句话在支持canvas的浏览器中会被忽略，不支持的则会显示出来-->
</canvas>
</body>

 2、JS代码：

window.onload=function(){
	//1、获取canvas对象
	var myCanvas = document.getElementById("myCanvas");
	myCanvas.width=800;//设置画布的宽度
	myCanvas.height=800;//设置画布的高度
	
	//2、判断当前浏览器是否支持canvas
	if(myCanvas.getContext("2d")){
		var context = myCanvas.getContext("2d");//获取canvas的上下文环境
		//3、使用canvas进行绘制（七巧板）
		//3-1、定义数组，用来标记七巧板的坐标
		var target=[
		{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CEFF68"},
		{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#66BDD0"},
		{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#F13D64"},
		{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FAF61B"},
		{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#A793C4"},
		{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#F78FCE"},
		{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#F6C928"}
		];

		//3-2、循环各个数组进行绘制
		for(var i=0;i<target.length;i++){
			draw(target[i],context);//绘制
		}
		
	}else{
		alert("当前浏览器不支持canvas，请换个浏览器试试");
	}
}

/**
*该方法用来绘制图像
*@param piece:各个模块信息，包括坐标和填充颜色
*@parma cxt:canvas的context
**/
function draw(piece,cxt){
	cxt.beginPath();
	cxt.moveTo(piece.p[0].x,piece.p[0].y);//起点
	for(var i=1;i<piece.p.length;i++){
		cxt.lineTo(piece.p[i].x,piece.p[i].y);//画七巧板的各条直线
	}
	cxt.closePath();

	//填充颜色
	cxt.fillStyle=piece.color;
	cxt.fill();//填充

	//设置边框线
	cxt.lineWidth=3;
	cxt.strokeStype="black";//边框线

	cxt.stroke();
}
Ysiqiqi

Ysiqiqi

相关推荐

微信小程序对图片进行canvas压缩的方法示例详解

微信小程序其实自带一个图片压缩的API wx.compressImage，但是这玩意目前感受就是个垃圾。IOS大多数情况下据说还可以，安卓有的时候降低质量压缩后体积反而变大，而且没办法控制其压缩至具体指定的大小，压缩后多大看天意。所以需要使用画布去自己实现

大地飞鸿 / 0评论 2020-11-12

将你的 Virtual dom 渲染成 Canvas

一个基于 vue 的 virtual dom 插件库，按照Vue render 函数的写法，直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定。这些信息是需要从接口取的，而且每个人都不一样。第一次碰到这

星星有所不知 / 0评论 2020-10-12

解决用H5 Canvas绘制的图片或文字在高清屏下模糊的问题

因此考虑用H5 Canvas加载图标png并把数值画上去，然后把canvas导出图片url并应用到点标记上。数字显然很模糊。因为我的电脑Win10系统设置了自定义缩放比大于devicePixelRatio但小于2. ctx.scale;//scale>

jinxiutong / 0评论 2020-07-26

Canvas 和 SVG 有什么区别？

canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一

MIKUScallion / 0评论 2020-07-05

[PDF] Rendering on Canvas

PDF.js 先创造canvas，再在上面渲染pdf的内容。创建一个size大于screen的canvas，其移动的触发事件是默认就有的么？// Keep the canvas hidden until the first draw callback, o

songfens / 0评论 2020-07-05

基于 HTML5 Canvas 的交互式地铁线路图

前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获以及代码的实现

songfens / 0评论 2020-06-11

canvas 图片旋转 导出下载

<button type="button" onclick="changeDir">往右旋转</button>

jinxiutong / 0评论 2020-06-08

小程序 自定义二维码 canvas海报 canvas保存为本地图片

<image src=‘{{preurl}}‘ mode=‘widthFix‘ class=‘previewImg‘></image>. <button bindtap=‘save‘ class="themeBtn

songfens / 0评论 2020-06-08

canvas动态画圆弧及requestAnimationFrame

canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。arc()实现画圆通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画

northwindx / 0评论 2020-05-31

html2canvas截取图片跨域解决办法

{useCORS:true,logging:true}解决图片跨域，截图不全的问题。

jinxiutong / 0评论 2020-05-31

## H5 canvas画图白板踩坑

最近接手了一个小型的H5，最主要的功能大概就是拍照上传和canvas画板了。主要是记录一下自己菜到像傻子一样的技术。白板涂鸦的内容是以base64的形式传给后端工程师的，图片上传的图片是路径，后端要求统一格式，所以需要把路径转为base64。先说一下项目的

northwindx / 0评论 2020-05-31

Unity UGUI - Canvas 画布

Canvas　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　。　　Canvas就是Unity渲染UI的组件。Canvas主要包含了以下部分：Canvas、Canvas Scaller、Graphic Raycaste

northwindx / 0评论 2020-05-27

uniapp微信小程序canvas隐藏

<canvas style="width: 350px; height: 530px;" canvas-id="firstCanvas"></canvas>. position: fixed

northwindx / 0评论 2020-05-25

canvas生成圆图和微信小程序canvas圆图

<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></c

MIKUScallion / 0评论 2020-05-25

canvas使用context.drawImage时图片不在画布上展示的问题

解决方案：在外层嵌套document.images[0].onload=function(){}。

jinxiutong / 0评论 2020-05-10

HTML 5 Canvas 参考手册

HTML5 <canvas> 标签用于绘制图像。不过，<canvas> 元素本身并没有绘制能力 - 您必须使用脚本来完成实际的绘图任务。本手册提供完整的 getContext 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形

xdyangxiaoromg / 0评论 2020-05-10

Canvas中的弧度和角度之间的关系

弧度又称弪度，是平面角的单位，也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时，通常不写弧度单位，或有时记为rad。一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，1°=π/180

大地飞鸿 / 0评论 2020-05-06

canvas 实现火焰的简单方式

// // ctx.fillStyle = ‘rgb‘;

jinxiutong / 0评论 2020-05-03

Canvas(3)---绘制饼状图

在绘制饼状图之前，我们先要理解什么是圆弧,如何在画布中绘制文字等等。所以这里将绘制饼状图理解拆分成以下几个步骤：。什么是弧度 弧度是一种长度的描述单位, 一个半径的长度就表示一弧度，所以一个圆有2*π个弧度。所以上面 Math.PI/2 到 Math.PI

northwindx / 0评论 2020-04-25

js canvas压缩图片和jQuery ajax上传图片简单demo

原来用的插件，里面东西太乱了，一会jq，一会原生js，本来原生js就不熟，看起来更难受，而且感觉好多东西都是没用的，而且后端php转存文件一直不是很熟悉，正好一起整理一下。就是很简单的一个demo，如果需要复杂的功能的话需要自己添加。但是原理基本都在这了，

jinxiutong / 0评论 2020-04-23

【Canvas】(2)---绘制折线图

之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图。这里将一整个绘制过程分为几个步骤:

songfens / 0评论 2020-04-19

HTML 5 画布

canvas 元素用于在网页上绘制图形。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：。fillS

MIKUScallion / 0评论 2020-04-11

uniapp canvas 记录一下画图的问题

2.在H5中 出现canvas闪烁的问题 ,就一定要用异步去显示canvas,

大地飞鸿 / 0评论 2020-04-07

小程序 canvas 2d 新接口 绘制带小程序码的海报图

需要注意的是：官方文档中CanvasContext的一些函数，在Canvas 2d模式下已经失效，这点，官方用了一句话做了描述：。canvas 组件的绘图上下文。CanvasContext 是旧版的接口， 新版 Canvas 2D 接口与 Web 一致。所

songfens / 0评论 2020-03-28

【canvas】 使用canvas压缩图片大小

由于各种大大小小的原因，自己最近经历了一些面试，其中有一个面试题是这样的，使用canvas怎样压缩图片大小。回去查资料，发现手机端在上传图片的时候，调起相机拍照的时候超过2m了，所以用到canvas压缩，优化用户体验。var arr = dataurl.s

xdyangxiaoromg / 0评论 2020-03-27

Canvas

ctx.arc;//true代表逆时针 默认false顺时针。strokeStyle 设置或返回用于笔触的颜色、渐变或模式。shadowBlur 设置或返回用于阴影的模糊级别。shadowOffsetX 设置或返回阴影与形状的水平距离。a

northwindx / 0评论 2020-03-08

Canvas

Canvas是HTML5新增的一个双标签，目的在页面设置一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。<canvas wi

nercon / 0评论 2020-03-06

基于 HTML5 Canvas 的 3D 热力云图效果

数据蕴藏价值，但数据的价值需要用IT技术去发现、探索，可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D热力图的效果展示。大楼内的人员分

zsh / 0评论 2020-03-01

基于 H5 Canvas 实现楼宇新风系统

现如今，新型冠状病毒疫情牵动着每一个人的神经，每天起床后的第一件事就是打开疫情地图，看看最新的疫情数据。如何防控对于普通居民来说，减少外出，注意卫生等都是有效措施，另外保持室内通风换气也是至关重要的，无论是飞沫传播还是流传的气溶胶传播，环境密闭导致空气浑浊

northwindx / 0评论 2020-02-24

canvas-基础

<canvas id="canvas" width="1024" height="768" style="border: 1px solid #ccc; display: bloc

MIKUScallion / 0评论 2020-02-22

canvas的其他应用

var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 计算gray. var point = windowToCanvas; // 获取鼠标相对于 canvas 标签的坐标

MIKUScallion / 0评论 2020-02-13

canvas

　　<canvas id="canvas" width="300" height="150"></canvas>. 　　ctx.rect(50,50,300,150)　　/

jinxiutong / 0评论 2020-02-13

Canvas

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas&

大地飞鸿 / 0评论 2020-02-11

canvas与svg的区别

　　　　1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；　　　　2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。

jinxiutong / 0评论 2020-02-10

Canvas和svg总结比较

strokeStyle：设置描边样式fillStyle：设置填充样式stroke()：描边fill()：填充。fillRect()：填充矩形strokeRect()：描边矩形clearRect()：清除画布矩形区域。无论是刚才执行的变换，还是fillSty

jinxiutong / 0评论 2020-02-03

Delphi 绘图[2] 无Canvas属性，获取 Canvas 对象

Cvs: TCanvas;Cvs:= TCanvas.Create;Cvs.Handle := GetDC(Panel1.Handle);Cvs.Brush.Color := clBlue;Cvs.FillRect(Panel1.ClientRect);C

songfens / 0评论 2020-02-01

Canvas2Image : Saving Canvas data to image file

This is a small library that lets you easily save a HTML5 canvas element as an imagefile. Files needed: canvas2image.js, base64.

panying00 / 0评论 2013-05-30

利用HTML5中Canvas处理并存储图片

HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。canvas中如果想要处理图片就需要借助ImageData这个对象，就是将画布中某

zsh / 0评论 2013-05-30

EVANYOU尤大个人网站主页CANVAS三角彩带效果分析学习

*You need set diff-size imgs to fit the devicePixelRatio.x.globalAlpha = 0.6 // gloabalAlpha set or return the opacity-value of

xdyangxiaoromg / 0评论 2020-01-17

微信小程序canvas截取任意形状的实现代码

最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。在此也

WebZhangJian / 0评论 2020-01-13

vue + canvas 图片加水印

<input type="text" placeholder="请输入你要添加的水印文字" class="water-text" v-model="text" @chan

xdyangxiaoromg / 0评论 2020-01-13

canvas 鼠标绘图

画直线的话原来是要在 mousemove 里清空画布，鼠标移动时都在不断地清空画布再重新根据起点终点来绘制。如此"曲折"才得到了一条直线，因为不断地 clearRect，所以要画多条直线就要记录以前画过的直线，试过用数组来记录，但感觉极

songfens / 0评论 2020-01-12

微信小程序--屏幕方向

微信小程序中有些地方的修改，既可以通过调用 wx 接口，也可以通过 .json 文件的设置。而有些则只能在配置项中设置。"pageOrientation": "landscape", // 支持 auto / por

MIKUScallion / 0评论 2020-01-11

Android中使用Canvas和Paint绘制一个安卓机器人

在Android中画笔使用Paint类，画布使用Canvas类来表示。首先编写一个继承自View的自定义View类，然后重写其onDraw方法，最后把自定义的view添加到actvity中。首先在要显示的Activity的布局文件中修改为FrameLayo

小虎哥哥爱学习 / 0评论 2020-01-10

获取应用图标并转为bitmap适配android10

public static synchronized Bitmap getBitmap(Context context) {. PackageManager packageManager = null;ApplicationInfo application

songfens / 0评论 2020-01-10

把图片剪切为圆形

private Bitmap createCircleBitmap(Bitmap resource). int width = resource.getWidth();Paint paint = new Paint();paint.setAntiAlias

MIKUScallion / 0评论 2020-01-10

15-canvas渐变色

<!DOCTYPE html>. margin: 0;padding: 0;display: block;margin: 0 auto;background: red;let oCtx = oCanvas.getContext("2d

songfens / 0评论 2020-01-08

17-canvas绘制扇形

<!DOCTYPE html>. margin: 0;padding: 0;display: block;margin: 0 auto;background: red;let oCtx = oCanvas.getContext("2d

jinxiutong / 0评论 2020-01-08

19-canvas绘制文字

let str = "小白兔真可爱两只耳朵竖起来";oCtx.font = "50px 微软雅黑";

songfens / 0评论 2020-01-08

11-canvas绘制折线图

<!DOCTYPE html>. margin: 0;padding: 0;display: block;margin: 0 auto;background: red;let oCtx = oCanvas.getContext("2d

jinxiutong / 0评论 2020-01-08