Canvas
关注
分享
扫一扫
文章平均质量分 60
houyanhua1
这个作者很懒，什么都没留下…
展开
-
Canvas 绘制文字(strokeText(),fillText())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-14 17:11:51 · 3967 阅读 · 0 评论 -
Canvas Canvas填充,填充色(fill()，fillStyle())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 10:58:51 · 17179 阅读 · 2 评论 -
Canvas 绘制图片(drawImage())
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canv原创 2018-04-14 22:22:50 · 2005 阅读 · 0 评论 -
Canvas 填充,非零环绕原则,中空矩形
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 11:24:47 · 1053 阅读 · 0 评论 -
Canvas 填充与描边的顺序问题
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 11:33:13 · 464 阅读 · 0 评论 -
Canvas 绘制线条的机制
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 11:50:27 · 677 阅读 · 0 评论 -
Canvas 相交线的拐点样式(lineJoin())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 12:47:50 · 1628 阅读 · 0 评论 -
Canvas 线帽(线头)的样式(lineCap())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 12:35:19 · 2177 阅读 · 0 评论 -
Canvas 判断点是否在路径内(isPointInPath())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 22:08:52 · 3304 阅读 · 0 评论 -
Canvas 绘制矩形(rect()，strokeRect()，fillRect())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 15:26:04 · 1959 阅读 · 0 评论 -
Canvas 清除画布(clearRect())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 15:35:53 · 12452 阅读 · 0 评论 -
Canvas 画一个指定大小的渐变矩形
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 16:18:44 · 282 阅读 · 0 评论 -
Canvas 绘制虚线(setLineDash())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 16:42:40 · 6126 阅读 · 0 评论 -
Canvas 绘制坐标系
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-10 17:17:08 · 1486 阅读 · 0 评论 -
Canvas 画布保存,画布内容转换为base64编码格式的图片(toDataURL())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 20:19:19 · 22253 阅读 · 1 评论 -
Canvas Canvas开始新路径(beginPath())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-10 10:25:57 · 799 阅读 · 0 评论 -
Canvas 旋转动画(rotate())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 14:46:16 · 4971 阅读 · 1 评论 -
Canvas 绘制一个指定的旋转图形(rotate())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 14:44:43 · 6996 阅读 · 1 评论 -
Canvas 画弧,扇形,画圆(arc())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-10 21:27:17 · 5276 阅读 · 0 评论 -
Canvas 文字的对齐方式(textAlign(),textBaseline())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-14 17:13:46 · 6240 阅读 · 0 评论 -
Canvas 在圆上画一点(arc())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-14 18:11:27 · 1425 阅读 · 0 评论 -
Cancas 画饼状图(arc())
pipe.js（画饼状图的外部JS文件）：(function( w ) { // 把角度转换为弧度 function angleToRadian( angle ) { return Math.PI / 180 * angle; } // 混入式继承 function extend( o1, o2 ) { for ( var...原创 2018-04-14 18:14:26 · 353 阅读 · 0 评论 -
Canvas 根据比例画折线图
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-10 18:15:58 · 676 阅读 · 0 评论 -
Canvas Canvas入门
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-09 22:03:12 · 273 阅读 · 0 评论 -
Canvas Canvas设置描边色和线宽(strokeStyle,lineWidth)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-09 22:26:49 · 20343 阅读 · 1 评论 -
Canvas Canvas闭合路径(closePath())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-09 22:33:10 · 1440 阅读 · 0 评论 -
Canvas 帧动画,绘制图像(drawImage())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 11:35:36 · 3465 阅读 · 0 评论 -
Canvas 帧动画(封装成对象),绘制图片(drawImage())
person.js（封装的外部JS文件）：(function( w ) { // 混入式继承( copy继承 ) function extend( o1, o2 ) { for ( var key in o2 ) { if ( o2.hasOwnProperty( key ) ) { o1[ key ...原创 2018-04-15 13:14:33 · 1019 阅读 · 0 评论 -
Canvas 平移(translate())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 13:59:21 · 970 阅读 · 0 评论 -
Canvas 旋转(rotate())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 14:09:53 · 1423 阅读 · 0 评论 -
Canvas 缩放(scale())
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {原创 2018-04-15 14:15:45 · 2658 阅读 · 0 评论 -
Canvas 状态保存(save())，状态回滚(restore())
状态保存：保存的是线宽、颜色、线帽等。(保存在栈的结构中)demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&原创 2018-04-15 13:45:54 · 920 阅读 · 0 评论 -
Canvas 动画帧函数(requestAnimationFrame()),流畅动画
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am原创 2018-04-16 11:02:49 · 2584 阅读 · 0 评论