HTML 5 画布(canvas) - LoveSuk
程序员文章站
2022-04-22 22:28:09
...
canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力。
canvas 是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面来做几个示例:
1、填充画布
执行如下:
2、获取坐标
执行如下:
3、绘制线条、图形
1绘制正方形如下:
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //x,y 起点
cxt.lineTo(10,50); //x,y
cxt.lineTo(50,50); //x,y
cxt.lineTo(50,10); //x,y
cxt.lineTo(10,10); //x,y
cxt.stroke();
执行如下
2绘制圆形如下:
执行如下:
4、绘制渐变
执行如下:
5、图片
执行如下:
推荐阅读
-
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
-
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
-
HTML5 Canvas像素处理使用接口介绍
-
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
-
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
-
html5 canvas-2.用canvas制作一个猜字母的小游戏
-
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
-
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
-
HTML5中Canvas与SVG的画图原理比较
-
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸