canvas基本使用，以及七巧板绘制

基本介绍

canvas是先设置状态，再执行（完成）
canvas的大小在js中用canvas.width和canvas.height两个方法设置,
canvas不建议用css指定canvas的大小，css指定的是这块画布的大小，并且这里的width和height是没有单位的，对于canvas来说还有里面分辨率以及图片的大小，写在css中就一同指定了

 <canvas id="canvas" width="1024" height="768" style="border:1px solid red;display: block;">
不建议这样写

当浏览器能够兼容canvas这个标签的时候，canvas标签中的内容会被忽略
一般在这个标签中显示的是降级处理，比如写一个：‘当前浏览器不支持canvas，请更换浏览器后再试’
默认不设置大小，这里会是一个300*150的大小
左上角为原点，向右x轴，向下y轴
先设置状态，最后设置启动

常用方法：

        canvas.widthcanvas.heightcanvas.getContext('2d')context.moveTon(100,100//线条起点context.lineTo(700,700)//线条延伸，可写多个，想要完成多边形，只需要起点和终点坐标一致context.lineWidth=5 //线条宽度context.strokeStyle="#005588"//线条颜色context.stroke()//线条完成context.fillStyle = "yellow"//填充颜色context.fill()//颜色填充完成context.beginPath()//假如有多个图形，每个图形的内容不一样，用这两个标签包起来绘制的路径context.closePath()

七巧板代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><canvas id="seven" style="border:1px solid red"></canvas></div>
</body>
<script src="seven.js"></script></html>

canvas具体实现：

先获取canvas，判断能不能兼容楼兰器，获取绘图的上下文，进行相关绘制

其中绘图是一块一块绘制的，先进入到一块的左上角，后面进行划线

var canvas = document.getElementById('seven')
canvas.width = 800
canvas.height = 800
if (canvas.getContext('2d')) {var context = canvas.getContext('2d')var targram = [{p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff67"},{p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf",},{p: [{x: 800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61",},{p: [{x: 600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a",},{p: [{x: 400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0",},{p: [{x: 200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc",},{p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca2",}]for (var i = 0; i < targram.length; i++) {draw(targram[i], 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.strokeStyle = "gray"cxt.lineWidth = 3;cxt.stroke()}} else {alert('浏览器不支持canvas')
}

canvas基本使用，以及七巧板绘制相关推荐

HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
关于canvas在retina屏下绘制文字或图像模糊的解决方案
一.问题描述最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案.有兴趣的同学 ...
【Excalidraw揭秘】canvas无限画布及矩形绘制
前言本节我们通过简单的矩形绘制学习如何实现无限画布准备工作在绘制前,我们需要矫正 canvas 的分辨率,使用 appState 保存 canvas 相关的信息.新建一个 index.jsx 文 ...
canvas在path路径上绘制文字
1.代码及解释如下: public class Main3Activity extends Activity {@Overrideprotected void onCreate(Bundle save ...
HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
canvas 元素绑定事件_绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...

canvas基本使用，以及七巧板绘制

基本介绍

常用方法：

七巧板代码

canvas基本使用，以及七巧板绘制相关推荐

最新文章

热门文章