HTML 5 画布(canvas)_html/css_WEB-ITnose
程序员文章站
2023-12-23 10:32:52
...
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、图片
执行如下:
推荐阅读
-
HTML 5 画布(canvas)_html/css_WEB-ITnose
-
position:fixed定位时 “高度坍塌” 问题的解决_html/css_WEB-ITnose
-
SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose
-
自学新手,如何用psd图层做出随窗口变化的网页?求大神指导_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
CSS实现pre标签中内容换行方法_html/css_WEB-ITnose
-
8.用户模块:跳转到登录页面_html/css_WEB-ITnose
-
遮盖鼠标光标_html/css_WEB-ITnose
-
div+CSS使用小技巧_html/css_WEB-ITnose
-
SEO优化之div+css命名规则_html/css_WEB-ITnose