canvas画画

- 坐标是以canvas的为标准的
画长方形：
画圆形：
- 画线条：
- 写文字：
- 写了一个王字（代码）：
- 效果图

1.基本语法：
html canvas 标签：
是个盒子（有长，宽）和div相同，但可以在里面画画

<canvas id="canvas1" width="400px"  height="400px"></canvas>

 <script>var canvas=document.getElementById("canvas1");var ctx=canvas.getContext('2d');</script>

坐标是以canvas的为标准的

开始画：

画长方形：

ctx.fillStyle=“颜色”；填充颜色
ctx.fillRect(矩形左上角x坐标 ,矩形左上角 y坐标, width, height, );
连续的对应的

ctx.fillStyle="black";
ctx.fillRect(0,0,20,20);

画圆形：

ctx.arc(x,y,radius,sAngle,eAngel，true)；
false/true :顺时针或者逆时针:画圆形
sAngle 默认为0方便画圆
x,y圆上的圆心坐标，radius为半径，
sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。
弧度和角度的转换公式： rad = deg*Math.PI/180;

ctx.stroke(); 实线绘圆的框架/或者线条
ctx.fill(); 填充颜色（上一个设置的ctx.fillStyle）
2*Math.PI：周长完整圆形
Math.PI ：半圆形

ctx.arc(150,150,30,0,2*Math.PI,true);
ctx.stroke();半圆形
ctx.fillStyle="pink";
ctx.arc(150,150,30,0,Math.PI,true);
ctx.stroke();
ctx.fill();

画线条：

ctx.moveTo(x坐标, y坐标); 线条的起点
ctx.lineTo(x坐标, y坐标); 线条的终点

ctx.strokeStyle=“red” 线条颜色，
ctx.beginPath(); //重新开始一条路径使颜色不互相影响

ctx.moveTo(10, 10);
ctx.lineTo(10,200);
ctx.stroke();

写文字：

clearRect(X,Y, width, height)
clearRect() 方法清空给定矩形内的指定像素(清空矩形内内容)
ctx.clearRect(0, 0,600,600);
ctx.fillText(“文字”,x坐标, y坐标);

ctx.fillText("hello world!",100,200);

写了一个王字（代码）：

<style>canvas{border: 2px solid black;
}</style>
<body><canvas id="canvas1"  width="400px" height="400px"></canvas><script>
var canvas=document.getElementById("canvas1");var ctx=canvas.getContext("2d");console.dir(ctx);ctx.moveTo(30,30);
ctx.lineTo(300,30);
ctx.stroke();ctx.beginPath();ctx.moveTo(30,170);
ctx.lineTo(300,170);
ctx.stroke();ctx.beginPath();
ctx.moveTo(30,300);
ctx.lineTo(300,300);
ctx.stroke();ctx.beginPath();
ctx.moveTo(150,30);
ctx.lineTo(150,300);
ctx.stroke();
</script>

效果图

canvas学习（html5）画画相关推荐

学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...
HTML5 Canvas学习---第一章《Hello World及图片显示》
在这个章节我们将在Html中使用Canvas标签,再使用Javascript操纵它,达到显示<Hello World>及图片的目的. 开始之前我们需要了解2个对象的概念:window和do ...
学习 HTML5 Canvas 这一篇文章就够了
一.canvas 简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也 ...
HTML5 Canvas 学习日志（三）
2019独角兽企业重金招聘Python工程师标准>>> HTML5 Canvas 学习日志(三) Canvas的11种合成蓝色为destination,粉色为source 1 ...
学习HTML5 Canvas这一篇文章就够了
一.canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏-- canvas .利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜实现 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
canvas学习日记一
由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. ...

canvas学习（html5）画画

canvas画画

坐标是以canvas的为标准的

画长方形：

画圆形：

画线条：

写文字：

写了一个王字（代码）：

效果图

canvas学习（html5）画画相关推荐

最新文章

热门文章

canvas学习（html5）画画

canvas画画

坐标是以canvas的为标准的

画长方形 ：

画圆形 ：

画线条：

写文字：

写了一个王字（代码）：

效果图

canvas学习（html5）画画相关推荐

最新文章

热门文章

画长方形：

画圆形：